我可以改变一个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>
活生生的例子
