リンクのマウスオーバーでdivの背景イメージを変更する

Question

達成したいこと

div内のリンクのマウスオーバー時にdivの背景イメージを変更したいとします。

例

<div id="container"> 
    <a href="" id="linktomouseover"></a> 
</div> 

私は

を試してみた私はjQueryのを使用して、背景画像を交換しようとしました：

<script language="javascript" type="text/javascript"> 

jQuery('#linktomouseover').mouseover(function() 
{ 
jQuery('#container').css("background-image", "url(bg-b.png)"); 
}); 

</script> 

誰もが私が欠けているものに私に助言することはできますか？

ソリューション

<style> 
#container{ 
width:100%; 
height:100%; 
background-image:url(http://thumbs.dreamstime.com/thumblarge_536/12838649102C1cO5.jpg); 
} 
</style> 

<div id="container"><br><br> 
<a href="" id="linktomouseover">hover</a> 
</div> 

<script> 
jQuery('#linktomouseover').hover(function() 
{ 
jQuery('#container').css("background-image", 
"url(http://static4.depositphotos.com/1011237/285/i/450/dep_2853473-Background-for-your-web-store.jpg) 
"); 
}).mouseleave(function(){ 
jQuery('#container').css("background-image", "url(http://thumbs.dreamstime.com/thumblarge_536/12838649102C1cO5.jpg)"); 
}); 
</script> 

Answer 1

欠落ID =

<div id="container"> 

ない

<div="container"> 

とリンクとして.hoverとLSOスイッチ.click（）は（）jQueryのコードの

http://sandbox.phpcode.eu/g/31e7b/6

<style> 
#container{ 
     width:100%; 
    height:100%; 
    background-image:url(http://thumbs.dreamstime.com/thumblarge_536/12838649102C1cO5.jpg); 
} 
</style> 
<div id="container"><br><br> 
    <a href="" id="linktomouseover">hover</a> 
</div> 
<script> 
jQuery('#linktomouseover').hover(function() 
{ 
    jQuery('#container').css("background-image", "url(http://static4.depositphotos.com/1011237/285/i/450/dep_2853473-Background-for-your-web-store.jpg)"); 
}); 
</script> 

Answer 2

これは解決策ではないかもしれませんが、DOMモデルがロードされた後、あなたは現在、おそらくjQueryの（「＃のlinktomouseover」）は何も返さないことを意味し、あなたのコードを実行していません。

これを試してみてください：

<script> 
jQuery(function() { 
    // Your code here 
}); 
</script> 

をまた、あなたが複数のリンクのためにこの効果を持ちたいならば、あなたはこのようにそれを行うことができます。

HTML：

<div class="container"> 
    <a class="linktomouseover">link</a> 
</div> 
<div class="container"> 
    <a class="linktomouseover">link</a> 
</div> 

JS：

jQuery(function() { 
    jQuery('.linktomouseover').mouseover(function() { 
     jQuery(this).parent().css('background-image', "url('bg-b.png')"); 
    }); 
});