if class is not hover - doesn't work

Question

Click anywhere except #menut closes .m2wrap. It works.

$(document).click(function() {
  if (!$('#menut').is(':hover')) {
    $('.m2wrap').slideUp();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='menut'>
  <div class='m1wrap'>
    <div class='m1'>SKY</div>
    <div class='m2wrap'>
      <div class='m2'>SEA</div>
      <div class='m2'>EARTH</div>
    </div>
  </div>
</div>

But if I replace #menut with .m1wrap - it doesn't work.

$(document).click(function() {
  if (!$('.m1wrap').is(':hover')) {
    $('.m2wrap').slideUp();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='menut'>
  <div class='m1wrap'>
    <div class='m1'>SKY</div>
    <div class='m2wrap'>
      <div class='m2'>SEA</div>
      <div class='m2'>EARTH</div>
    </div>
  </div>
</div>

In this case console shows the error - Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover...

Actually, what I need is - if multiple class is not hover...

Any help?

Answer 1

Try

$(document).click(function() {
  if($('#menut:hover').length == 0) {
    $('.m2wrap').slideUp();
  }
});

This is following the answer in this SO question.

Answer 2

I had the exact same issue I fixed mine by just removing the semicolon before the hover as below

`$(document).ready(function(){
  $(".owl2-controls").mouseleave(function() {
    if(!$('.owl2-controls').is(':hover')){
      $('.owl2-controls').hide();
    };
  });
 });`

To

`$(document).ready(function(){
  $(".owl2-controls").mouseleave(function() {
    if(!$('.owl2-controls').is('hover')){
      $('.owl2-controls').hide();
    };
  });
 });`

No error thrown now.