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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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> 

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>