当我悬停一个链接时，如何改变DIV背景？
我可以改变一个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>
共有1个答案
使用数据属性
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>
活生生的例子
-
问题内容： 我正在尝试将 鼠标悬停在div的背景颜色上 。 div {background：white;} div a：hover {background：grey; 宽度：100％; 显示：块; 文字修饰：无；} 只有 div内的 链接 获得背景色 。 如何使 整个div获得该背景色？ 谢谢 编辑： 如何使整个div充当链接-当您单击该div上的任意位置时，将您带到某个地址。 问题答案： 当鼠标
-
问题内容： 我有一个链接图像。当用户将鼠标悬停在链接上时，我想显示不同的图像。 目前，我正在使用以下代码： 但是我遇到了很多问题：div没有选择CSS规则（当我在Firebug中查看元素时，该元素只是没有显示相关的CSS规则）。 也许这是因为（据我所知）这是无效的HTML：您不能在周围加上。但是，如果切换到该位置，似乎会遇到更大的问题，因为您不能可靠地在span上设置高度和宽度。 帮帮我！我该如何
-
我正在使用引导4，我有一个导航栏，上面有一些使用导航链接类的链接，还有一个使用导航链接的侧边栏导航。我需要改变一个链接的悬停颜色。最好的方法是什么？
-
只是尝试在CSS中练习悬停和下拉。在下面的代码中，我希望每当下拉子div（带有Home1文本的绿色div)悬停在上面时，的背景色（红色）应该更改为蓝色。 会很感激你的帮助。 null null
-
每一个，我都在使用angular并且我有一个svg，html，比如： 这是svg源代码filter_default： 我想知道当鼠标悬停时如何改变svg的颜色，谢谢大家的帮助！
-
我想改变两个div的位置时悬停在一个div。在下面的代码中，当我悬停在.img div上时，我想移动顶部的.title div（位置例如top:50px)，并在其下方显示最初设置为隐藏的.info div。 我正在尝试跟随代码，但似乎不工作的悬停。我将感谢任何帮助。 HTML： CSS： 演示。http://jsfidle.net/upwv3/