时间戳

首页 > 解决方案 > 当另一个 div 悬停时，CSS 更改单独 div 的背景颜色

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

问题描述

给定一个基本菜单和 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还是可以更简单地实现？

标签： javascripthtmlcss

解决方案

是的，您可以使用 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>

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

推荐阅读