Question

给定一个基本的菜单和如下所示的 div..

#link:hover ~ #custom {
    background: #ccc
}

<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a id="link" href="#">Link</a>
      </li>
    </ul>
  </div>
</div>

<div id="custom">
  Custom Content
</div>

我曾尝试使用一般的兄弟组合器，但它不起作用。

有没有办法使用 CSS 使 custom div 在导航项悬停时也改变背景颜色？

我需要 Javascript 还是可以更简单地实现？

Answer 1

您可以使用悬停 mynav 更改 mydiv css 试试这个 css。

<style>
#mynavid:hover +#mydivid{color:red;}
</style>

Answer 2

这里是简单的代码，我希望这会有所帮助...

.card {
    width: 150px;
}

.image {
    height: 80px;
  background-color: tomato;
}

.description {
  height: 80px;
  background-color: limegreen;
}

.image:hover ~ .description .link,
.link:hover {
    color: #ff0;
    background-color: white;
    }

<div class="card">
  <div class="image">img</div>
  <div class="description">
    <a class="link" href=#>some link</a>
    <div class="text">Fulfilled direction use continual set.</div>
  </div>
</div>

Answer 3

是的，您可以使用 j-query 来完成。下面是脚本代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function(){
    $(document).mousemove(function(){
         if($("#nav-link:hover").length != 0){
            $(".custom").css("background-color","red");
        } else{
          $(".custom").css("background-color","");
        }
      });
    });
    </script>
<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a href="#" id="nav-link">Link</a>
      </li>
    </ul>
  </div>
</div>
<div class="custom">
  Custom Content
</div>

将此代码添加到您上面的代码中，它将起作用

当另一个 div 悬停时，CSS 更改单独 div 的背景颜色

3 个答案: