Wie Inhalt schweben, ausschließen einige div class

Question

ich einen Beispielcode haben, wenn Hover

$(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"); 
    }); 
}); 

Fehler, wenn ich .nav schweben, Ergebnis liegt innerhalb der

Answer 1

Sie müssen nicht setzen . in der .hasClass():

.hasClass("nav") 

---

Oder Sie könnten versuchen, die Wähler als eine Sammlung Wähler wie $('div') stattdessen zu ändern:

$("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"); 
 
});

#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;}

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

Answer 2

Mein Ansatz ist Ziel, was wir zu schweben und konzentrieren sich auf es versuchen. Wie Sie im Code sehen, geht der Selektor und wird innerhalb von ul li und dann können Sie Ihre Aktion ausführen.

Ich benutzte Hover, der kurze Hand für .mouseenter und .mouseleave ist. Ich hoffe es hilft dir.

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