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(){})，但也没有使用它。有什么建议吗？

最近的

$( '#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

你可以使用按钮的容器div来做这样的事情：

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

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

Fiddle DEMO

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 { 边框：1px固体; 填充：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';
}

jquery mouseenter和mouseleave无法正常工作

4 个答案: