如何在mouseover上只悬停父李而不是孩子？

Question

我举了一个简单的例子，我在mouseover事件中添加了hover类。但是这个类也添加到了child。我希望hover类只添加父示例（a，b，{ {1}}）。但不在c和ab上。但当我将鼠标悬停在cd或第一个元素上时，它会在a和{{1}上添加悬停类我只想在ab

上添加父级的悬停类

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

cd

Answer 1

您只能定位不属于li的后代的li元素

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：只使用以下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>