Question

当我将鼠标悬停在其中任何一个上时，我无法同时在两个类上转换淡入淡出。

＆＃13;

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

＆＃13;

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

＆＃13;

当我将鼠标悬停在.sv-logo之上时，上面的CSS工作，这两个类都会淡入。但是，当我将鼠标悬停在.nav上时，只有.nav会淡入。

Answer 1

您的问题在于adjacent sibling selector仅选择以下元素。它无法选择前一个元素。

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

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

1 个答案: