如何在鼠标悬停时仅悬停父母李而不是孩子

how to hover only parent li not children on mouseover?

本文关键字：悬停孩子父母鼠标更新时间：2023-09-26

我做了一个简单的例子，其中我在鼠标悬停事件中添加了悬停类。但是这个班级也增加了孩子.我想要悬停类只添加父示例（a、b、c）。但不是在ab和cd.但是当我将鼠标悬停在a或第一个元素上时，它会在ab和cd上添加悬停类。我只想仅在父意味着上添加悬停类a

这是我的代码https://jsfiddle.net/qp6ex1jh/9/

$('#main-menu').on("mouseenter", "li", function() {
    $( this ).addClass( "hover" ); 
});
$('#main-menu').on("mouseleave", "li", function() {
    $( this ).removeClass( "hover" ); 
});

您只能定位不是 li 后代的 li 元素，例如

$('#main-menu').on("mouseenter", "li:not(li li)", function() {
   $(this).addClass("hover");
 });
 $('#main-menu').on("mouseleave", "li:not(li li)", function() {
   $(this).removeClass("hover");
 });

#main-menu ul li.hover {
  background-color: red;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu">
  <section>
    <ul>
      <li>
        <a>a</a>
        <ul class="sub-menu">
          <li>
            <a>ab</a>
          </li>
          <li>
            <a>cd</a>
          </li>
        </ul>
      </li>
      <li>
        <a>b</a>
      </li>
      <li>
        <a>c</a>
      </li>
    </ul>
  </section>
</div>

试试这个：仅使用css，如下所示：

#main-menu >li:hover {
  background-color: red;
  padding: 10px;
}

<div>
  <section>
    <ul  id="main-menu">
      <li>
        <a>a</a>
        <ul class="sub-menu">
          <li>
            <a>ab</a>
          </li>
          <li>
            <a>cd</a>
          </li>
        </ul>
      </li>
      <li>
        <a>b</a>
      </li>
      <li>
        <a>c</a>
      </li>
    </ul>
  </section>
</div>

或者通过Jquery：

$('#main-menu >li').hover(function() {
  $(this).toggleClass("hover")
});

#main-menu li.hover{
  background-color:red;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div >
  <section>
    <ul id="main-menu">
      <li>
        <a>a</a>
        <ul class="sub-menu">
          <li>
            <a>ab</a>
          </li>
          <li>
            <a>cd</a>
          </li>
        </ul>
      </li>
      <li>
        <a>b</a>
      </li>
      <li>
        <a>c</a>
      </li>
    </ul>
  </section>
</div>