jquery mouseenter and mouseleave not working correctly

Question

I have a button that is hidden when my page is loaded, and on mouseenter I want it to show, then hide again on mouseleave.

HTML

    <div id = "t" style='position:absolute; top:0; left:50%;'>
        <button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
    </div>

Enter / Leave

    $( '#toggle' ).mouseenter(function(){
        $('#toggle').show();
})

    $( '#toggle' ).mouseleave(function(){ 
        $('#toggle').hide();
})

I changed my button to not hide to test this, and the only things that works is that the button hides, but it does so when I actually click it, rather than when I hover over it. The other problem is that I can't figure out any way to get the button to show again. I tried to use .hover(function(){}) but did not get that to work either. Any suggestions?

Closest

$( '#t' ).hover(function(){
        $('#toggle').css("opacity",1);
},function(){ 
        $('#toggle').css("opacity",0);
})

Above is the closest I got to my answer but it does not work on hover, instead it works when I click the button and off the button.

Can you make a jsfiddle so we can see whats going on? Not really sure from your question — Andrew Newby
– Andrew Newby, Commented May 19, 2014 at 17:41
If you hide the button, what trigger then exists for it to be shown? — j08691
– j08691, Commented May 19, 2014 at 17:42
How do you hover over something that isn't there? The logic seems flawed! — user3649503
– user3649503, Commented May 19, 2014 at 17:42
@j08691 I have tried using opacity, onmouseover events, hide/show, visibility, and display. Nothing is working. Once the button is hidden it does not come back — Jordan.J.D
– Jordan.J.D, Commented May 19, 2014 at 18:44

Jordan.J.D · Accepted Answer · 2014-05-19 18:16:46Z

4

jfiddle

$( '#toggle' ).mouseenter(function(){
        $('#toggle').css("opacity",1)
})

    $( '#toggle' ).mouseleave(function(){ 
        $('#toggle').css("opacity",0)
})

better be invisible to eye , but as a DOM it should exist.

edited May 19, 2014 at 18:16

Jordan.J.D

8,12111 gold badges51 silver badges80 bronze badges

answered May 19, 2014 at 17:43

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jordan.J.D Over a year ago

Tested this on my page and it only gets shown on click, rather than a hover.

Ehsan Sajjad Over a year ago

by changing opacity button will be unclickable or not?

ProllyGeek Over a year ago

@JordanD no kidding ! :D

ProllyGeek Over a year ago

@EhsanSajjad yes it will be . can be disabled if this gonna be a trouble.

Jordan.J.D Over a year ago

@ProllyGeek even when I try this on hover it only works when I click the button (or empty space where the button is hidden). What am I missing?

|

Ehsan Sajjad · Accepted Answer · 2014-05-19 17:43:30Z

1

You can do something like this using container div of button:

 $( '#t' ).mouseenter(function(){
        $('#toggle').show();
})

    $( '#t' ).mouseleave(function(){ 
        $('#toggle').hide();
})

Fiddle DEMO

answered May 19, 2014 at 17:43

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

6 Comments

Jordan.J.D Over a year ago

I tried this previously, but maybe I did it incorrectly. I will try it again.

Ehsan Sajjad Over a year ago

your mistake was you not gave any height width to div

Jordan.J.D Over a year ago

I gave width and height to my div and this still does not work. Is it possible once hidden, the div is getting pushed behind another element causing me to not be able to hover over it?

Ehsan Sajjad Over a year ago

use min-height and min-width so div keeps a specific area occupied

Jordan.J.D Over a year ago

This does not work either, the button will hide but never show.

|

Jordan.J.D · Accepted Answer · 2014-05-19 18:49:24Z

0

Please find the code provided at the following link for JSFIDDLE

You need to apply the mouse enter and mouse leave on container not on the button. If that is being put on the button then it creates a problem that when you leave the button then the display goes none and then you cannot fire the reenter option again as the DOM element doesnot exist.

HTML Code:

<div class="" id="targetContainer">
    <button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button> 
</div>

JS Code:

 $("#targetContainer").mouseenter(function(e){
    $("#toggle").show();
    }).mouseleave(function(e){
    $("#toggle").hide();
    });

CSS Code: #targetContainer{ border:1px solid; padding: 10px; }

#targetContainer #toggle{
    display:none;
}

edited May 19, 2014 at 18:49

Jordan.J.D

8,12111 gold badges51 silver badges80 bronze badges

answered May 19, 2014 at 17:51

Akhilesh Sharma

1,6282 gold badges18 silver badges29 bronze badges

Comments

Jordan.J.D · Accepted Answer · 2014-05-19 18:58:25Z

0

I finally got this to work with the follow HTML and Javascript. My biggest problem was that when I hid the element, I could not get it back but no answers worked for me but this one (thanks to all who tried).

HTML

    <div id = "t" style='position:absolute; top:0; right:0;' onmouseover="showButton()" onmouseout="hideButton()">
        <button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
    </div>

Javascript

 function showButton(){
    document.getElementById('toggle').style.visibility ='visible';
}

function hideButton(){
    document.getElementById('toggle').style.visibility ='hidden';
}

answered May 19, 2014 at 18:58

Jordan.J.D

8,12111 gold badges51 silver badges80 bronze badges

Collectives™ on Stack Overflow

jquery mouseenter and mouseleave not working correctly

4 Answers 4

12 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related