jquery - 检查代码更改背景图像与 jquery 的过度链接

Question

我有这个代码。这个想法是，当鼠标悬停在链接上时，div 的背景图像会发生变化，否则会显示原始图像。我会用 5 个链接来完成它，但目前我什至连一个链接都无法让它工作。

JQUERY 脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#changebg").hover(
    function() {
        //mouse over
        $('.thediv').css('background-image', 'url("www.site.com/img/img2.png")');
    }, function() {
        //mouse out
        $('.thediv').css('background-image', 'url("www.site.com/img/img1.png")');
    });
});
</script>

CSS 样式

.thediv { position: relative; background-image:url('www.site.com/img/img1.png'); }

HTML 代码

<div class="thediv">

<div style="position: absolute;">
<a href="#" class="linkstyle" id="changebg">CHANGE</a>
</div>



</div>

还有一个额外的...制作相同但有 5 个链接...例如:

<a href="#" class="linkstyle" id="changebg">CHANGE</a>
<a href="#" class="linkstyle" id="changebg1">CHANGE</a>
<a href="#" class="linkstyle" id="changebg2">CHANGE</a>

...

我必须复制并粘贴相同的代码，还是有更好的形式来做到这一点？

非常感谢:D

祝你有个美好的一周。

Answer 1

您需要像这样在 .theDiv 上设置高度和宽度:

.thediv { 
    position: relative; background-image:url('http://fpoimg.com/300x250'); 
    width:500px;
    height:500px;
}

here是一个工作示例。此外，您的示例图像不起作用(据我所知，它们实际上并不存在)，因此我将它们更改为一些填充图像，以便您可以看到我的示例有效