Question

假设我在页面中有多个链接，许多（但不是全部）指向同一个资源。它们可能并非都具有相同的样式（一个可能是图像，一个只是文本），它们可能散布在整个页面中。我想要的是，如果有人在一个人身上盘旋，他们都会突出显示（例如:hover）。

例如：

＆＃13;

a img{border:3px solid blue;}
a img:hover{border:3px solid orange;}
a:hover{color:orange;}

＆＃13;

<a href="" class="multilink"><img src="http://dummyimage.com/200x100/8be0d3/a30fbd.png&text=Awesome" alt="placeholder"></a>
<p>My <a href="" class="multilink">awesome website</a> has recently been updated. You should visit my <a href="" class="multilink">sweet webpage</a>. If  you are on mobile, I've include image links so your big fat fingers can click them easier.

＆＃13;

我并不完全反对使用jquery，但如果有一种方法可以使用 CSS来实现它，那将是理想的。

Answer 1

您无法仅使用css执行此操作试试这段代码

<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
a img{border:3px solid blue;}
a img:hover{border:3px solid orange;}
</style>
</head>
<body>
<a href="" class="multilink"><img src="http://dummyimage.com/200x100/8be0d3/a30fbd.png&text=Awesome" alt="placeholder"></a>
<p>My <a href="" class="multilink">awesome website</a> has recently been updated. You should visit my <a href="" class="multilink">sweet webpage</a>. If  you are on mobile, I've include image links so your big fat fingers can click them easier.
<script>
$("a").hover(function() {
$("a").css({color:"orange"});
},function() {
$("a").css({color:"black"});
});
</script>
</body>
</html>

Answer 2

你可以试试这个 -

span.some-class:hover > a.multilink { background:black };
a img{border:3px solid blue;}
a img:hover{border:3px solid orange;}
a:hover{color:orange;}

<p><span class="some-class"><a href="" class="multilink"><img src="http://dummyimage.com/200x100/8be0d3/a30fbd.png&text=Awesome" alt="placeholder"></a></span></p>
<p>My <span class="some-class"><a href="" class="multilink">awesome website</a></span> has recently been updated. You should visit my <span class="some-class"><a href="" class="multilink">sweet webpage</a></span>. If  you are on mobile, I've include image links so your big fat fingers can click them easier.</p>

希望有所帮助。

当任何内容悬停在

2 个答案: