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.

Answer 1

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.

Answer 2

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

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

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

Fiddle DEMO

Answer 3

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;
}

Answer 4

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';
}