CODEWITHSUNDEEP
jqueryhtml
DrifterSheep
DrifterSheep

Reputation: 13

jQuery: detect if mouseover hidden element

I'm working on a troll website for fun (click here to see it), and I want the button to only appear when the mouse is not over the button. However, jQuery's "mouseover" action does not detect if your cursor is over a hidden element. Is there any way I can accomplish this with a different action, or do I have to do something to the button with HTML?

$("document").ready(function(){
    $("#button").mouseenter(function(){
        $("#button").hide();
    });
    $("#button").mouseleave(function(){
        $("#button").show();
    });
});

Upvotes: 0

Views: 178

Answers (2)

leoap
leoap

Reputation: 1729

The .hide() and .show() methods sets the CSS display:none setting. This makes the element unhoverable (if exists such word :D), so, you need to set the visibility of the element instead:

$("document").ready(function(){
    $("#button").mouseenter(function(){
        $("#button").css('visibility', 'hidden');
    });
    $("#button").mouseleave(function(){
        $("#button").css('visibility', 'visible');
    });
});

Upvotes: 0

Majid Fouladpour
Majid Fouladpour

Reputation: 30252

#button:hover {
  opacity: 0;
  cursor: text;
}
<p>
  Some text<br/>
  
  <button id="button" onclick="return false;">And a jumpy button</button><br/>
  
  Followed by more text
</p>

Upvotes: 1

Related Questions