当鼠标悬停在元素上时显示隐藏的div，并保持显示，直到鼠标离开任一元素。

Question

当鼠标悬停在元素上时显示隐藏的div，并保持显示，直到鼠标离开任一元素。

4

这应该很简单，但我对此还不熟悉，我认为我想得太多了。我想要当鼠标悬停在一个元素上时显示另一个元素，并且如果用户将鼠标悬停在任何一个元素上，则保持其显示。

这是我开始的内容，我已经尝试编写if语句来表示如果元素正在显示并且已经悬停在上面，则保持其显示，但它没有改变你在这个fiddle中看到的行为。

在这个例子中，如果用户移动鼠标尝试单击它，我希望“我是链接”文本保持不变。我在SO上找到了其他帖子，例如这个，但我无法应用它们的答案来解决我的问题。如果您查看此页面，并悬停在鞋子上，您可以看到我想要实现的确切效果。产品信息会显示出来，您可以移动鼠标单击它。

$("#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);
});

请指引我迈向光明！

- surfbird0713

你的小提琴没有加载jQuery。如果它加载了，那么你的代码可以工作，尽管CSS有点偏差，但是如果你在悬停时看向div的右下角，你会看到链接出现。 - hagbard

3

你们为什么都说它有效？在问题中，提问者说：“我想在鼠标悬停在一个元素上时显示另一个元素，并且如果用户鼠标悬停在两个元素之一上，则保持其显示状态。”但是它会在离开第一个元素时立即消失。 - Reinstate Monica Cellio

它正在加载jQuery 1.3.2作为外部资源，对吧？我正在为此制作的网站使用1.3.2版本，无法升级。当我将鼠标从白色框移动到“I Am A Link”上时，“I Am A Link”会向上滑动。我希望它保持不变... - surfbird0713

当鼠标离开 #example3-link1 或 #caribbean-info 时，应该隐藏该链接。 - surfbird0713

我刚刚更新了fiddle链接，希望你能看到jquery已经加载。同时，我还添加了一个链接到另一个网站，那里有我想要实现的内容。 - surfbird0713

显示剩余7条评论

3个回答

-1

如果目标元素（例如需要出现的元素）可以通过CSS选择器从悬停元素中“选择”，则您不需要为此编写脚本。

这意味着目标元素可以嵌套在悬停元素中，或者悬停元素是目标元素的前一个同级元素。否则，您将不得不使用脚本。

请参见此演示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;
}

更新

即使您想要一些漂亮的过渡效果，也可以通过纯CSS实现。请参见更新后的Fiddle。

- avrahamcool

那是如何使链接向上滑动和向下滑动的？ - Reinstate Monica Cellio

@Archer 滑动的东西不是一个规范，而是一种做法。在这个问题中，OP只想要出现/消失。 - avrahamcool

@Archer 我没有做出任何决定。他也没有要求我这样做。 - avrahamcool

好的。祝你好运 :) - Reinstate Monica Cellio

@Archer 如果滑动是你投反对票的唯一原因，我已经更新了我的答案。 - avrahamcool

显示剩余2条评论

-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();
});

- Milan and Friends

当您离开#caribbean-info时，它不会消失。 - Reinstate Monica Cellio

1

你不能两全其美。如果当你在 #caribbean-info 时链接消失了，你怎么能点击它呢？我现在会在 Fiddle 上尝试一些东西... - Milan and Friends

他们在这个网站上都有 - 将鼠标悬停在鞋子上：http://www.saksfifthavenue.com/editorial/manolo042913.jsp - surfbird0713

我悬停在鞋子上，它不完美。我已经更新了 Fiddle，并添加了延迟。 - Milan and Friends

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Reinstate Monica Cellio · Accepted Answer

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

jsfiddle链接

HTML

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

JavaScript（JavaScript 缩写为 JS）

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

CSS

我还稍微修改了CSS，这样当你悬停在#caribbean-info的可见部分上方时，链接才会显示出来。我只是将display属性设置为inline-block：

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