从css中的另一个元素内部控制一个元素

问题描述

你好，我现在面临从不同元素内部控制元素的问题。例如，如果我想通过将鼠标悬停在 header 中的另一个元素上来控制页脚内元素的外观。我希望你能得到答案并提前致谢

解决方法

一种方法是，例如，如果您有一个带有链接的 li，并且您想在将鼠标悬停在 li 上时更改链接的颜色，您可以这样做：

ul li:hover a {
  color: green;
}

/* only for presentation */
ul li {
  width: 100px;
  height: 50px;
  box-shadow: 2px 2px 2px 1px rgba(0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<ul>
  <li>
    <a href="#">Link</a>
  </li>
</ul>

如果你想像你所说的那样影响完全随机的元素，你可以这样做：

/* ----- This is all extra styling ----- */
body {
  background-color: #121212;
}

.header {
  position: fixed;
  background-color: rgb(31,33,34);
  width: 100%;
  color: white;
  font-family: arial;
  text-align: center;
}

.footer {
  position: absolute;
  top: 90%;
  background-color: rgb(31,34);
  width: 100%;
  color: white;
  font-family: arial;
  text-align: center;
}
/* ----- This is all extra styling ----- */

.header:hover + .footer {
  background-color: red;
}

<!DOCTYPE html>
<html>
  <head>
  <!-- Meta tags and what not -->
  </head>
  <body>
    <div class="header">
        <!--Header stuff here-->
        <h2>My Website</h2>
    </div>
    <!--In this case the footer and header must be exactly next to eachother for the + to work-->
    <div class="footer">
      <h4>Hover on the header to change my color</h4>
    </div>
    
    <!--This could be whatever you want the page content to be-->
    <main>
    </main>
 </body>
</html>

hover