How to hover content, exclude some div class

I have a sample code, when hover bug

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

Error when I hover .nav, result is Inside

Answers 1

  • My approach is target what we are trying to hover and focus on it. As you see in the code the selector goes and get li within ul and then you can do your action.

    I used hover which is short hand for .mouseenter and .mouseleave. I hope it will help you.

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


Related Articles