0

I've the following problem (probably it could be solve easily, let's see :))

.title:hover ~ .intro a {color:red;}
.title a:hover, .intro a:hover{color:red;}
<div class="gri">

 <p>don't change me</p>

   <div class="title">
    <h3><a href="http://google.com">title</a></h3>
   </div>

<h2>don't change me</h2>

  <div class="intro">
   <a href="http://google.com" class="excerpt">intro text blah blah</a>
  </div>

</div>

Only using CSS and not changing the HTML code, how can I reach the following:

hover on the "title" results in the title becoming red and also the intro. Same for the intro (hover on the intro, the intro and the title become red).

Any suggestion?  I already tried different CSS combinations, but it led to nowhere.

Thank you

David

Dande
  • 3
  • 4

1 Answers1

0

According to https://www.w3schools.com/css/css_combinators.asp

  • targets adjacent sibling selector ~ is used for general sibling selector

however, adjacent means "immediately following", there's no equivalent for previous sibling. Therefore you can't do this using pure CSS.

You'll need to use javascript in this case, or refactor the way HTML is structured.

Benjamin Rochez
  • 176
  • 5