Question

我有一个id =“mybutton”的div和一个id =“mydiv”的隐藏div，如下面的代码所示：

<head>
<script>
$(document).ready(function(){
    $("#mybutton").hover(function(){
        $("#mydiv").fadeIn();
    }, function(){
        $("#mydiv").fadeOut();
    });
});
</script>
</head>
<body>
    <div id="mybutton">Show</div>
    <div id="mydiv" style="display:none;">Hidden thing..</div>
</body>

即使鼠标超过“mydiv”（在我的按钮上方悬停），我也希望“mydiv”出现。

Answer 1

编写CSS

#mydiv{
    display:none;
   /* visibility:hidden; */
}
#mybutton:hover + #mydiv,#mydiv:hover{
    display:block;
  /*   visibility:visible; */
}

Demo

您还可以使用visibility:visible;和visibility:hidden;代替display属性

Answer 2

$(document).ready(function(){
    $("#mybutton").hover(function(){
       $("#mydiv").fadeIn();
    }, function(){
       $("#mydiv").fadeOut();
    });
});

Answer 3

给他们一个共同的父母并将悬停连接到它。

<强> HTML：

<div id="parent">
        <div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>

<强>的CSS：

#mydiv {
    display: none;
}

<强> JQ：

$(document).ready(function(){
    $("#parent").hover(function(){
        $("#mydiv").fadeIn();
    }, function(){
        $("#mydiv").fadeOut();
    });
});

JSfiddle：http://jsfiddle.net/f2W9b/

Answer 4

将其包裹在div中：

<div id="container">
     <div id="mybutton">Show</div>
     <div id="mydiv">Hidden thing..</div>
</div>

在容器div上听mouseenter event。

Answer 5

将您的按钮包裹在容器中，如下所示：

<span id="hoverarea">
    <div id="mybutton">Show</div>
    <div id="mydiv" style="display: none;">Hidden thing..</div>
</span>

<script>
$(document).ready(function(){
    $("#hoverarea").hover(function(){
        $("#mydiv").fadeIn();
    }, function(){
        $("#mydiv").fadeOut();
    });
});
</script>

http://jsfiddle.net/n4B5b/1/

Answer 6

在你的函数的fadeout（）部分，你可以检查鼠标当前是否在#mydiv div上空盘旋吗？如果是这样（例如在悬停时向#mydiv添加一个类），请检查它并且不要淡出。

<head>
<script>
$(document).ready(function(){
    $("#mybutton").hover(function(){
        $("#mydiv").fadeIn();
    }, function(){
       if (!$("#mydiv").hasClass('hovering') {
           $("#mydiv").fadeOut();
        }
    });
    $("#mydiv").hover(function(){
        $("#mydiv").addClass('hovering');
    }, function (){
        $("#mydiv").removeClass('hovering');
    });
});
</script>
</head>
<body>
    <div id="mybutton">Show</div>
    <div id="mydiv" style="display:none;">Hidden thing..</div>
</body>

Jquery / css在悬停时显示图像

6 个答案: