当元素被鼠标悬停时显示隐藏的div并保持显示,直到鼠标离开任一元素

时间:2013-09-17 15:36:03

标签: javascript jquery html css

这应该很简单,但我是新手,我认为我是在思考。我希望在另一个元素悬停时显示一个元素,并在用户被鼠标悬停时保持显示。

这是我开始的内容,我试图写一个if语句来说明元素是否显示并悬停,保持显示,但它没有改变你看到的行为in this fiddle

在示例中,如果用户移动鼠标以尝试单击它,我希望“我是链接”文本保留在那里。我在this one上发现了其他帖子,但无法应用他们的答案来解决我的问题。

If you look at this page,将鼠标悬停在鞋子上,您可以看到我想要达到的确切效果。显示产品信息,您可以移动鼠标点击它。

$("#caribbean-info").mouseenter(function () {
    $('#example3-link1').slideDown(400);
}).mouseleave(function () {
    $('#example3-link1').slideUp(400);
});

我也尝试做过这样的事情,但这不起作用:

$("#caribbean-info").mouseenter(function () {
    $('#example3-link1').slideDown(400).hover(function () {
        $('#example3-link1').show();
    }).mouseleave(function () {
        $('#example3-link1').hide();
    });
}).mouseleave(function () {
    $('#example3-link1').slideUp(400);
});

请告诉我光明!

3 个答案:

答案 0 :(得分:1)

如果你将div和链接都包装在容器中,那么你可以简单地将mouseenter和mouseleave事件应用于...

jsfiddle link

<强> HTML

<div id="container">
    <div id="caribbean-info"></div>
    <a href="#test" id="example3-link1">I am a link - click here.</a>
</div>

<强>的Javascript

$("#container").mouseenter(function() {
    $("#example3-link1").slideDown();
});
$("#container").mouseleave(function() {
    $("#example3-link1").slideUp();
});

<强> CSS

我还对css稍作修改,以便链接仅在您悬停在#caribbean-info的可见部分上方时显示。我只是将显示设置为内联块:

#caribbean-info{
    height: 100px;
    width: 300px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #ccc;
    position: relative;
}

答案 1 :(得分:-1)

这是一个更新的Fiddle,包含在div中的链接,就像您想要的那样;)

<div id="caribbean-info">
  <a href="#test" id="example3-link1">I am a link - click here.</a>
</div>


$("#caribbean-info").mouseenter(function() {
  $('#example3-link1').stop().slideDown(400);  
}).mouseleave(function() {
  $('#example3-link1').stop().delay(800).slideUp(400);
});
$('#example3-link1').hover(function() {
  $(this).stop();
});

答案 2 :(得分:-2)

你不需要一个脚本(只要目标元素[例如那个需要出现的元素]可以用来自hovered元素的CSS选择器'选择')

这意味着目标元素可以嵌套在悬停的元素中,或者悬停的元素是目标的前一个兄弟元素) 否则,你将不得不使用一个脚本。

请参阅此Demo Fiddle

<强> HTML

<div id="Hovered">Hover me</div>
<div id="Target">I'm the target</div>

<强> CSS

#Target
{
    background-color: red;
    display: none;
}
#Hovered
{
    width: 50px;
    height: 50px;
    border: 1px solid blue;
}
#Target:hover, #Hovered:hover + #Target
{
    display: block;
}

<强>更新

即使你想要一些coll转换,它仍然可以通过纯CSS完成 见Updated Fiddle