jQuery mouseenter和mouseleave无法正常工作

Question

我有一个在页面加载时隐藏的按钮，在mouseenter我希望它显示，然后在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>

进入/离开

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

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

我将按钮更改为不隐藏以进行测试，唯一起作用的是按钮隐藏了，但实际上是在我单击该按钮时才隐藏，而不是将鼠标悬停在它上面。 另一个问题是我无法找到让按钮再次显示的方法。 我尝试使用.hover(function(){})但也没有.hover(function(){})工作。 有什么建议么？

最近的

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

上面是我最接近我的答案的方法，但是在悬停时不起作用，而是在单击按钮并关闭按钮时起作用。

Answer 1

jfiddle

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

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

最好看不到，但作为DOM应该存在。

Answer 2

您可以使用button的div容器执行以下操作：

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

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

小提琴演示

Answer 3

请在以下链接中找到JSFIDDLE提供的代码

您需要在容器上而不是按钮上应用鼠标进入和鼠标离开。 如果将其放置在按钮上，则会产生一个问题，当您离开按钮时，显示器将不显示任何内容，并且由于DOM元素不存在，您将无法再次触发重新输入选项。

HTML代码：

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

JS代码：

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

CSS代码：#targetContainer {border：1px solid; 填充：10px; }

#targetContainer #toggle{
    display:none;
}

Answer 4

最后，我将其与以下HTML和Javascript一起使用。 我最大的问题是，当我隐藏该元素时，我无法找回它，但没有答案对我有用，但这个答案（感谢所有尝试过的人）。

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