ホバーの異なるdiv要素に異なる背景画像を追加するにはどうすればいいですか？

Question

グリッド内に複数のdiv要素が配置されています。ユーザーがマウスの上にマウスを置いたときに、特定の異なる背景イメージを持つようにして、マウスがdivを離れるときに消えるようにします。基本的には、すべての四角形にユーザーのデータがあるユーザー情報ページです。人々が四角形の上を移動すると、ユーザーの画像は背景画像として表示されます。ここにHTMLがあります：

<div class="contributor"> 
    Some great stuff here 
</div> 

私は現在使用しているjQueryコードです。問題：それは各divに同じ画像を割り当てますが、divごとに異なる画像が必要です。

$(document).ready(function(){ 
    $('.contributor').mouseenter(function(){ 
     $(this).addClass('visible'); 
    }); 
    $('.contributor').mouseleave(function(){ 
    $(this).removeClass('visible'); 
}); 

}）;

はここに目に見える "クラスのコードです：

.visible{ 
    background-image: url('../res/dev-1.png'); 
} 

Answer 1

まず、によって解析されていない「IMAGEURL」（という名前の属性で画像のURLを保存ブラウザは）：あなたはまた、動的にHTMLを構築する必要があり、もちろん

$('.contributor').mouseenter(function(){ 
     var imgageUrl = $(this).attr("imageurl"); 
     $(this).css("background-image" , imgageUrl); 
    }); 
    $('.contributor').mouseleave(function(){ 
    $(this).css("background-image" , "none"); 
    }); 

：

その後

<div class="contributor" imgageurl="../res/dev-1.png"></div> 
<div class="contributor" imgageurl="../res/dev-2.png"></div> 

、このjQueryのコードを使用します。

Answer 2

なぜあなたはjQueryのを使用していますか？ CSSと疑似クラス:hoverだけを使用してください。

.contributor:hover{ 
    background-image: url('../res/dev-1.png'); 
} 

切り抜いたのdivに適用されます。

.contributor.diff-div:hover{ 
    background-image: url('../res/dev-2.png'); 
} 

あなたはCSSで何かを行うことができた場合は、それはほとんど常にあり、それはJavaScriptの

Answer 3

を使用するよりも よりよい解決策になります

の場合は、addClassの代わりにcssという関数を使用することもできます。

$(document).ready(function(){ 
    $('.contributor').mouseenter(function(){ 
     if(this.id == "one") 
     $(this).css("background-image" , "url('../res/dev-1.png')"); 
     else if(this.id == "two") 
     $(this).css("background-image" , "url('../res/dev-2.png')"); 
    }); 
    $('.contributor').mouseleave(function(){ 
    $(this).css("background-image" , "none"); 
    }); 
}); 

Answer 4

jqueryで試してみてください。あなたはそれはdivの番号のbacgroundとして、それらを設定しますdev-1.pngからdev-6.pngに6つのイメージを持っていると仮定し、1〜6それぞれ

$(document).ready(function(){ 
    $('.contributor').mouseover(function(){ 
    var index = $("div").index(this); 
    index++; 
    var bI= "background-image:url('../res/dev-"+index+".png');"; 
    $("this").eq(index).attr('style',bI); 
    }); 
    $('.contributor').mouseleave(function(){ 
    var index = $("div").index(this); 
    index++; 
    var bI= "background-image:none"; 
    $("this").eq(index).attr('style',bI); 
}); 

}); 

Answer 5

参考のため（あまりにも面倒、あなたは要素のトンを持っている場合は適用されません）

これは、純粋なCSSで達成することができます。

画像は（ランダム画像サービス）をロードするために第2のかかる場合があります

の作業例：（フルページで開い応答しない）

.optionlist li { 
 
    background: #111; 
 
    color: #999; 
 
    padding: .5em; 
 
    list-style-type: none; 
 
    border: 1px solid; 
 
    max-width: 70px 
 
} 
 
.optionlist li:hover { 
 
    background: red; 
 
} 
 
.optionlist li:hover:after { 
 
    content: ''; 
 
    width: 800px; 
 
    height: 600px; 
 
    position: fixed; 
 
    top: 30%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
/* Start Background Control */ 
 

 
#red:after { 
 
    background: url(http://lorempixel.com/800/600/) 
 
} 
 
#blue:after { 
 
    background: url(http://lorempixel.com/800/601/) 
 
} 
 
#green:after { 
 
    background: url(http://lorempixel.com/801/600/) 
 
} 
 
#yellow:after { 
 
    background: url(http://lorempixel.com/801/601/) 
 
} 
 
#orange:after { 
 
    background: url(http://lorempixel.com/799/600/) 
 
} 
 
#white:after { 
 
    background: url(http://lorempixel.com/800/599/) 
 
} 
 
#black:after { 
 
    background: url(http://lorempixel.com/801/599/) 
 
} 
 
/* End Background Control */

<div class="optionlist"> 
 
    <ul> 
 
    <li id="red">Red</li> 
 
    <li id="blue">Blue</li> 
 
    <li id="green">Green</li> 
 
    <li id="yellow">Yellow</li> 
 
    <li id="orange">Orange</li> 
 
    <li id="white">White</li> 
 
    <li id="black">Black</li> 
 
    </ul> 
 
</div>