当我将鼠标悬停在几个链接上时，我可以更改 div 的背景图像吗？我的意思是，如果我将鼠标悬停在 link1 上，有一个背景，link2 有另一个背景，依此类推。
<div style="background: url(image1.jpg) no-repeat right; ">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
可以用 JavaScript、jQuery 或简单的 CSS 技巧来完成吗？
谁能告诉我我做错了什么？？？？
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$('.background-changer').on('mouseover', 'a', function () {
var background = "url('" + $(this).attr('data-background') + "')";
$('.background-changer').css('background-image', background)
});
</script>
</head>
<body>
<div style="background:url(http://i.dailymail.co.uk/i/pix/2013/01/01/article-2255449-16B57005000005DC-878_964x641.jpg) no-repeat right;" class="background-changer">
<a href="#" data-background="https://twimg0-a.akamaihd.net/profile_images/1298643948/FranceFlag_svg.png">Link 1</a>
<a href="#" data-background="http://cdn.londonandpartners.com/visit/london-organisations/houses-of-parliament/63950-640x360-london-icons2-640.jpg">Link 2</a>
<a href="#" data-background="http://i.dailymail.co.uk/i/pix/2013/01/01/article-2255449-16B57005000005DC-878_964x641.jpg">Link 3</a>
<a href="#" data-background="http://us.123rf.com/400wm/400/400/godrick/godrick1002/godrick100200011/6503920-tower-bridge-london-england-uk-europe-illuminated-at-dusk.jpg">Link 4</a>
</div>
</body>
</html>
最佳答案
使用数据属性
jQuery:
$('.background-changer').on('mouseover', 'a', function () {
var background = "url('" + $(this).attr('data-background') + "')";
$('.background-changer').css('background-image', background)
});
HTML:
<div style="background: url(image1.jpg) no-repeat right;" class="background-changer">
<a href="#" data-background="image1.jpg">Link 1</a>
<a href="#" data-background="image2.jpg">Link 2</a>
<a href="#" data-background="image3.jpg">Link 3</a>
<a href="#" data-background="image4.jpg">Link 4</a>
</div>
关于javascript - 当我悬停链接时如何更改 DIV 背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14567354/