CODEWITHSUNDEEP
htmlcss
aslum
aslum

Reputation: 12274

Highlight all instances of same link when any are hover over

Say I have several links in a page, many (but not all) point to the same resource. They might not all have identical stylings (one might be an image, one just text) and they may be interspersed throughout the page. I want for if someone hovers over one, they all highlight (eg :hover).

For example:

a img{border:3px solid blue;}
a img:hover{border:3px solid orange;}
a:hover{color:orange;}
<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.

I'm not completely opposed to using jquery, but if there's a way to do it with just CSS that would be ideal.

Upvotes: 0

Views: 119

Answers (2)

Mo Martin
Mo Martin

Reputation: 207

You could try this - 

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>

Hope that helps.

Upvotes: 1

Mourad karoudi
Mourad karoudi

Reputation: 58

You can't do it with css only Try this code

<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>

Upvotes: 1

Related Questions