如何悬停内容，排除一些div类

Question

我有一个示例代码，悬停时

$(document).ready(function() {
   $("#content").mouseenter(function(e) {
      if ($(e.currentTarget).children().hasClass(".nav")) {
            console.log("Outside");
        } else {
            console.log("Inside");
        }
   }).mouseleave(function(e) {
      console.log("Outside");
   });
});

当我悬停.nav时出错，结果是内部

Answer 1

您不必将.放入.hasClass()：

.hasClass("nav")

或者您可以尝试将选择器更改为$('div')之类的集合选择器：

＆＃13;

＆＃13;

$("div").mouseenter(function(e) {
  if ($(e.currentTarget).is(".nav")) {
    console.log("Outside", e.currentTarget);
    e.stopPropagation();
  } else {
    console.log("Inside", e.currentTarget);
  }
}).mouseleave(function(e) {
  console.log("Outside");
});

＆＃13;

#content{width:200px; height:200px; margin:30px auto; border:solid 2px red;}
.nav{width:50px; height:20px; float:right; margin:160px 0 0 0 ; border:solid 2px green;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="nav"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我的方法是针对我们试图悬停并专注于它的目标。正如您在代码中看到的那样，选择器会在ul中获得li，然后您可以执行操作。

我使用悬停，这是.mouseenter和.mouseleave的简写。我希望它会对你有所帮助。

$(function() {
  $('.nav li').hover(
    function(e) {
      console.log('inside');
    },
    function(e) {
      console.log('outside');
    }
  );
});

ul{
border: 2px solid gray;
}
ul li{
padding: 5px;
font-weight: bold;
font-size: 15px;
border: 1px solid black;
margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>one</li>
  <li>two</li>
</ul>