Javascript Jquery/css在悬停状态下显示图像_Javascript_Jquery_Html_Css

Javascript Jquery/css在悬停状态下显示图像

javascript jquery html css

Javascript Jquery/css在悬停状态下显示图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个id=“mybutton”的div和一个id=“mydiv”的隐藏div，如下代码所示： <head> <script> $(document).ready(function(){ $("#mybutton").hover(function(){ $("#mydiv").fadeIn(); }, function(){ $("#mydiv").fadeOut(); }); }); </script>

我有一个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>


$（文档）.ready（函数（）{
$（“#mybutton”）.hover（函数（）{
$（“#mydiv”）.fadeIn（）；
}，函数（）{
$（“#mydiv”）.fadeOut（）；
});
});
显示
隐藏的东西。。

我希望即使鼠标悬停在“mydiv”上，也能显示“mydiv”（在将鼠标悬停在mybutton上之后）。

为它们指定一个公共父对象，并将鼠标悬停连接到该父对象

html:

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

#mydiv {
    display: none;
}

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

Jq:

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

#mydiv {
    display: none;
}

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

jsIDLE:

将其包装在div中：

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


显示
隐藏的东西。。

并在container div中侦听。将按钮包装在容器中，如下所示：

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


显示
隐藏的东西。。
$（文档）.ready（函数（）{
$（“#hoverarea”）.hover（函数（）{
$（“#mydiv”）.fadeIn（）；
}，函数（）{
$（“#mydiv”）.fadeOut（）；
});
});

在函数的fadeout（）部分，能否检查鼠标当前是否悬停在#mydiv上？如果是这样（比如在#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>


$（文档）.ready（函数（）{
$（“#mybutton”）.hover（函数（）{
$（“#mydiv”）.fadeIn（）；
}，函数（）{
if（！$（“#mydiv”）.hasClass（‘悬停’）{
$（“#mydiv”）.fadeOut（）；
}
});
$（“#mydiv”）.hover（函数（）{
$（“#mydiv”）.addClass（“悬停”）；
}，函数（）{
$（“#mydiv”）.removeClass（“悬停”）；
});
});
显示
隐藏的东西。。

编写CSS

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

您也可以使用

visibility:visible；

和

visibility:hidden；

而不是

display

property

为什么不用另一个属性包装所有内容并在其上悬停？@DhavalMarthak抱歉，我忘了写“#”邮递updated@ronen我不能用另一个来包装我有一个更复杂的项目，不允许我包装这些东西。其他解决方案？你能把mydiv放在mybutton里面吗？@Pete-Hmm是的，我想。除了给一个共同的父对象之外，其他解决方案不存在？因为我正在做的项目不允许我编辑和给一个共同的父对象悬停区域的父项..您可以通过JQuery以编程方式包装它们。需要一个示例吗？给您：这与@DavidM的答案相同，只是将

span

替换为

div

。是的，它早了一分钟。；）在这个示例中，如果我在悬停区域上悬停，我可以看到mydiv。但我只想当你在mybutton上停留时看到mydiv！该容器应该是一个span，而不是div，因此它会包裹您的按钮，并且没有自己的空间。我更新了我的答案。这是公平的最简单和最好的解决方案。总而言之