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?

Post some HTML. If you right click on your area and do *Inspect Element* and hover over your `m1wrap` div, does it have a height? Or is it `0`? — Tyler Roper, Dec 20 '16 at 20:04
I just edited your question and made each of your examples its own code snippet. It looks like they're both working... — J. Titus, Dec 20 '16 at 20:05
I have the same as J. Titus -- I checked in case it was a browser issue, but both worked for me in Chrome, Firefox, IE, and Edge. — Rob Wilkins, Dec 20 '16 at 20:06
@J.Titus, I checked console and saw an error. Please check my update — qadenza, Dec 20 '16 at 20:14
Check the answer here http://stackoverflow.com/questions/16497457/ishover-is-broken-as-of-jquery-1-9-how-to-fix and see if you could check the length of the returned Jquery object. If it's more than 0 then the element is being hovered over. — dokgu, Dec 20 '16 at 20:18

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

Try

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

This is following the answer in this SO question.

edited May 23 '17 at 12:33

Community

1
1

answered Dec 20 '16 at 20:23

dokgu

4,957
3
39
77

@bonaca I updated the condition for the `if` statement. Could you try again? – dokgu Dec 20 '16 at 20:27
Solved, finally. Thanks a lot. – qadenza Dec 20 '16 at 20:30

score 0 · Answer 2 · answered Aug 04 '21 at 13:32

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.

if class is not hover - doesn't work

2 Answers2