How to transition two classes simultaneously using CSS

Question

I am having trouble transitioning fade in simultaneously on two classes when I hover over either one of them.

.sv-logo {
    opacity: 0.5;
    transition: all .3s;
}

.nav{
    opacity: 0.5;
    transition: all .3s
}

.sv-logo:hover, .sv-logo:hover + .nav{
    opacity: 1;
    transition: all .3s;
}

.nav:hover, .nav:hover + .sv-logo{
    opacity: 1;
    transition: all .3s;
}

<div class="grid">
         <div class="sv-logo">
             <img id="logo1" src="images/logo.png" alt="logo">               
        </div>
        <div class="nav">
             <nav>
                  <ul>
                      <li><a href="index.html">Portfolio</a></li>
                      <li><a href="index.html">About</a></li>
                      <li><a href="index.html">Contact</a></li>
                  </ul>
             </nav>
       </div>
 </div>

The above CSS works when I hover on top of .sv-logo, both classes fade in. However, when I hover over .nav, only .nav fades in.

Previous sibling selector problem, maybe you will find something useful here: https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — sinisake, Nov 23 '17 at 23:34
Possible duplicate of [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — Jon P, Nov 23 '17 at 23:40

score 1 · Answer 1 · answered Nov 23 '17 at 23:33

Your problem lies in the fact that the adjacent sibling selector only selects the following element. It can't select the previous element.

Consider encapsulating in another container, maybe header

header {
  opacity: 0.5;
  transition: all .3s;
}



header:hover{
  opacity: 1;
  transition: all .3s;
}

<div class="grid">
  <header>
    <div class="sv-logo">
      <img id="logo1" src="images/logo.png" alt="logo">
    </div>
    <div class="nav">
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="index.html">About</a></li>
          <li><a href="index.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
</div>

You could also use javascript which can traverse the DOM better.

Thanks for the suggestion, but it seemed to displace the grid. I decided to change the design of the nav in the end. — mexicanChica, Nov 28 '17 at 10:51

How to transition two classes simultaneously using CSS

1 Answers1