jQuery 在链接的鼠标悬停时更改 div 的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7375175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background image of div on mouseover of a link
提问by Dominor Novus
What I want to achieve
我想要达到的目标
I want the background image of div to change on the mouseover of a link within the said div.
我希望 div 的背景图像在鼠标悬停在所述 div 内的链接上时发生变化。
Example
例子
<div id="container">
<a href="" id="linktomouseover"></a>
</div>
What I've tried
我试过的
I've tried swapping the background image using jQuery:
我尝试使用 jQuery 交换背景图像：
<script language="javascript" type="text/javascript">
jQuery('#linktomouseover').mouseover(function()
{
jQuery('#container').css("background-image", "url(bg-b.png)");
});
</script>
Can anyone advise me on what I'm missing?
谁能告诉我我缺少什么？
Solution
解决方案
<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>
回答by genesis
missing id=
缺少 id=
<div id="container">
not
不是
<div="container">
and also switch .click() with .hover() as link says
并切换 .click() 与 .hover() 作为链接说
http://sandbox.phpcode.eu/g/31e7b/6
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>
回答by Alxandr
This might not be the solution, but you are currently not running your code after the dom-model is loaded, which probably means that jQuery('#linktomouseover') returns nothing.
这可能不是解决方案，但是在加载 dom-model 后您当前没有运行代码，这可能意味着 jQuery('#linktomouseover') 不返回任何内容。
Try this:
尝试这个：
<script>
jQuery(function() {
// Your code here
});
</script>
Also, if you would like to have this effect for more than one link, you can do it like this;
另外，如果你想对多个链接有这种效果，你可以这样做；
html:
html：
<div class="container">
<a class="linktomouseover">link</a>
</div>
<div class="container">
<a class="linktomouseover">link</a>
</div>
js:
js：
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
jQuery(this).parent().css('background-image', "url('bg-b.png')");
});
});
