Javascript 将鼠标移到元素上时显示隐藏的div，并保持显示，直到鼠标离开任一元素

这应该是非常简单的，但我在这方面是新手，我认为我想得太多了。我想在鼠标悬停在另一个元素上时显示一个元素，如果用户将鼠标悬停在其中一个元素上，则保持该元素的显示

这是我的开始，我试着写一个if语句来说明元素是否显示并悬停在上面，保持显示，但它并没有改变您看到的行为

在本例中，如果用户移动鼠标试图单击“我是链接”，我希望“我是链接”文本保持在那里。我在SO like上找到了其他帖子，但还没能用它们的答案来解决我的问题

，然后将鼠标悬停在鞋子上，你可以看到我想要达到的确切效果。产品信息将显示，您可以移动鼠标单击它

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

---

请把灯给我看

您不需要脚本（只要目标元素[例如需要显示的元素]可以通过悬停元素中的CSS选择器“选择”）

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

看到这个了吗

HTML

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

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

更新

即使您想要一些coll转换，也可以通过纯CSS完成 请参见此

这里有一个更新的链接，包装在div中，可以按照您的需要工作；）

$（“#加勒比信息”）.mouseenter（函数（）{
$（'#示例3-link1'）.stop（）.slideDown（400）；
}).mouseleave（函数（）{
$（'#示例3-link1'）.stop（）.delay（800）.slideUp（400）；
});
$（'#示例3-link1'）。悬停（函数（）{
$（this.stop（）；
});

如果将div和链接都包装在一个容器中，则只需将mouseenter和mouseleave事件应用于该容器即可

HTML

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

<div id="container">
    <div id="caribbean-info"></div>
    <a href="#test" id="example3-link1">I am a link - click here.</a>
</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做了一点小小的修改，这样只有当您将鼠标悬停在

#carbitra info

的可见部分上方时，链接才会显示出来。我刚刚将“显示”设置为“内联块”：

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

---

---

您的小提琴不加载jQuery。如果你的代码能正常工作，尽管css有点不对劲，但是如果你在悬停时看着div的右下角，你会看到链接出现。你的小提琴上的代码按你所希望的那样工作，只需记住为你的小提琴包含jquery库。使用jquery库就可以了；）为什么你们都说它有效？？在这个问题中，OP声明

我想在另一个元素悬停时显示一个元素，如果用户被鼠标悬停在其中任何一个元素上，则保持显示。

当您离开第一个元素时，它就会消失。它正在加载jquery 1.3.2作为外部资源，不是吗？我制作这个网站的目的是使用1.3.2，没有升级的机会。当我将鼠标从白色框中移到“我是链接”上方时，“我是链接”会向上滑动。我希望它保持不变……这是如何让链环上下滑动的？@Archer滑动的东西不是一个规范。这是一种方法。在这个问题上，OP只是想出现/消失。这是完全错误的，你真的不应该去决定什么对OP是重要的，什么对OP不是重要的。@Archer我什么都不做决定。他不是自找的，好吧。祝你好运：）当你离开时，它不会消失。

#加勒比信息

你不能两者兼得。如果链接在您居住时消失

#加勒比信息

您打算如何点击它？我现在要在小提琴上试试……他们在这个网站上都有——悬停在鞋子上：我悬停在鞋子上，它并不完美。我已经更新了Fiddle，增加了延迟。这肯定很接近，唯一的问题是如果你把鼠标放在链接上方，它仍然会显示出来。也许我必须制作一个图像地图，其中包括链接将出现的产品和空间，并将其用作“容器”并应用您的方法？现在尝试JSFIDLE链接。我刚刚制作了

#carbitra info

显示：内联块

，因此它不会自动水平填充页面。您现在可以将鼠标悬停在它的旁边，链接不会显示：）完美！这正是我想要的。不是我期望的那种回答，只是用一个容器包装。干得好，非常感谢！你会更新你的答案来添加CSS调整吗？看看这把小提琴。这是不一致的——有时候，示例链接1在应该保持静止的时候会上下滑动。有什么想法吗？当您将鼠标悬停在div上时，该链接会显示出来，与以前完全相同。你是说当你将鼠标悬停在图像上时，它应该显示出来吗？