CODEWITHSUNDEEP
htmlcss
Wazy
Wazy

Reputation: 494

Make two elements in div hover together

I have a div with two a elements in it. I want it so if you hover on one of the a elements both of them change color. I figured applying the div to the CSS class would make it work but it still only changes one.

div.test-hover :hover {
  color: #f20d20;
}
<div class="test-hover">
  <a class="article-title" href="google.com">This is main title</a>
  <br/>
  <a class="article-title" href="google.com">title</a>
</div>

Upvotes: 1

Views: 105

Answers (1)

sno2
sno2

Reputation: 4173

The problem with your current code is the div.test-hover :hover selector is styling child elements that are hovered. However, what you seem to want is just style the a tags inside of div.test-hover when the wrapper div is hovered. Here is a snippet with the fixed code:

.test-hover:hover a {
  color: #f20d20;
}
<div class="test-hover">                                        
    <a class="article-title" href="google.com">This is main title</a>
    <br/>
    <a class="article-title" href="google.com">title</a>
</div>

Upvotes: 3

Related Questions