我希望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>
答案 0 :(得分:5)
缺少id =
<div id="container">
不
<div="container">
并使用.hover()切换.click(),如链接所示
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>
答案 1 :(得分:1)
这可能不是解决方案,但是在加载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')");
});
});