当我悬停链接时如何更改DIV背景？ [英] How to change DIV background when i hover a link?
本文介绍了当我悬停链接时如何更改DIV背景？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我悬停几个链接时，我可以更改div的背景图片吗？我的意思是，如果我将鼠标悬停在link1上，则会有一个背景，link2和其他背景等等。
Can I change a div's background image when I hover few links, I mean if I hover over link1 there is one background, link2 an other background and so on.
<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技巧完成？
Can it be done with JavaScript, or jQuery, or simple CSS trick?
任何人都可以告诉我什么是我做错了吗？
CAN ANYONE TELL ME PLEASE WHAT I AM DOING WRONG????
<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：
jQuery:
$('.background-changer').on('mouseover', 'a', function () {
var background = "url('" + $(this).attr('data-background') + "')";
$('.background-changer').css('background-image', background)
});
HTML：
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>
这篇关于当我悬停链接时如何更改DIV背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
