仅使用 CSS 使 html 列表以某种方式运行 [重复]

Question

我正在制作一个纯 css 和 html 的网站，我想以某种方式只使用 css。

我有一个列表，每次，我将鼠标悬停在其中任何一个上，我希望其他人采用不同的颜色。 我写的，不一样！

当我将鼠标悬停在其中任何一个上时，只有它下面的项目会改变颜色：

 <div class="sketch">
                    <div class="sketch-div">
                        <a href="#">Sketch</a>
                    </div>
                
                    <div class="hide">
                        <img  width="50%" src="images/sketchcloud.jpg"
                            alt="Sketch Cloud">
                    </div>
                </div>
                <div class="WeTransfer">
                    <div class="WeTransfer-div">
                        <a href="#">WeTransfer</a>
                    </div>
                    <div class="hide">
                        <video width="50%" webkit-playsinline="webkit-playsinline">
                            <source src="images/wetransfer-preview.3b6e83b8.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                
                <div class="Coffee">
                    <div>
                        <a href="#">Coffee by Benjamin</a>
                    </div>
                    <div class="hide">
                        <img width="50%" src="images/coffeebybenjamin.jpg"
                            alt="Coffee by Benjamin">
                    </div>
                </div>
                
                <div class="Beam">
                    <div>
                        <a href="#">Beam</a>
                    </div>
                    <div class="hide">
                        <video width="50%" webkit-playsinline="webkit-playsinline">
                            <source src="images/beam-preview.940b40c4.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <div class="More">
                    <div>
                        <a class="arrow" href="#">More</a>
                    </div>
                    <div class="hide">

                    </div>
                    
                </div>

上面是nav 元素内。

这是它的 css 代码：

.sketch:hover ~ .WeTransfer  a{
   color:  #ccc;
}

.sketch:hover ~ .Coffee  a{
    color:  #ccc;
}

.sketch:hover ~ .Beam  a{
    color:  #ccc;
}

.sketch:hover ~ .More  a{
    color:  #ccc;
}
/* Wetransfer  */
.WeTransfer:hover ~ .sketch  a{
    color:  #ccc ;
 }
 
 .WeTransfer:hover  ~ .Coffee  a{
     color:  #ccc;
 }
 
 .WeTransfer:hover ~ .Beam  a{
     color:  #ccc;
 }
 
 .WeTransfer:hover ~ .More  a{
     color:  #ccc;
 }
/* Coffee */
.Coffee:hover ~ .WeTransfer a{
    color:  #ccc;
 }
 
 .Coffee:hover ~ .sketch  a{
     color:  #ccc;
 }
 
 .Coffee:hover ~ .Beam  a{
     color:  #ccc;
 }
 
 .Coffee:hover ~ .More  a{
     color:  #ccc;
 }

这里我悬停在 benjamin 的咖啡上，它下面的元素得到不同的颜色，但它上面的元素不会改变颜色。

我怎样才能只用 css 和 html 做到这一点？

Answer 1

您似乎正在制作网页的导航部分。如果是这样的话，我建议使用 li 标签而不是使用 div！

比如说……

<!-- don't use <div> tags -->

<nav>
  <div>
    <div>Sketch</div>
   </div>

  <div>
    <div>WeTransfer</div>
   </div>

  <div>
    <div>Coffee by Benjami</div>
   </div>

  <div>
    <div>Beam</div>
   </div>
</nav>

但是使用 li 标签：

ul {
  list-style: none;
 }
 
.list-1:hover ~ .list-2,.list-1:hover ~ .list-3,.list-1:hover ~ .list-4 { background-color: yellow; }

<ul>
  <li class="list-1">Sketch</li>
  <li class="list-2">WeTransfer</li>
  <li class="list-3">Coffee by Benjami</li>
  <li class="list-4">Beam</li>
 </ul>

轰隆隆！正是这.list-1:hover ~ .list-2,.list-1:hover ~ .list-3,.list-1:hover ~ .list-4 { background-color: yellow; }简单的代码行来解决您的问题！如您所见，通过将鼠标悬停在第一个列表项（“Sketch”）的顶部，它改变了第二个列表项（尚未悬停）的颜色

这个人解释的很好link