html - 如何使用 CSS 同时转换两个类

Question

当我将鼠标悬停在其中任何一个上时，我无法同时在两个类上进行淡入过渡。

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

当我将鼠标悬停在 .sv-logo 上时，上述 CSS 起作用，两个类都淡入。但是，当我将鼠标悬停在 .nav 上时，只有 .nav 淡入。

Answer 1

您的问题在于 adjacent sibling selector只选择 following 元素。它无法选择上一个元素。

考虑封装在另一个容器中，可能是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>

您还可以使用可以更好地遍历 DOM 的 javascript。