当鼠标悬停在链接上时，更改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>

- Dominor Novus

Answer 1

缺少id=

<div id="container">

不。

<div="container">

并且按照链接所说，将 .click() 替换为 .hover()

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>

- genesis

---

这不是删除的原因 :) 但我看到了更多的错误 :p - genesis

单击？我想你是指鼠标悬停，或者我漏掉了什么吗？ - Christian Smorra

@ChristianSmorra：哎呀，鼠标悬停了，是的。 - genesis

谢谢提供这个例子，它解决了我的问题。我忘记提到我需要在鼠标离开时恢复原始背景图像。我已经将完成的代码添加到问题中。再次感谢。 - Dominor Novus

Answer 2

这可能不是解决方案，但目前你没有在dom-model加载后运行代码，这很可能意味着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')");
    });
});

- Alxandr