3

这应该很简单，但我对此很陌生，我认为我想太多了。我想在另一个元素悬停时显示一个元素，并在用户将鼠标悬停在任一元素上时保持显示。

这是我开始的内容，我尝试编写一个 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);
});

请给我看光！

4

3 回答 3

1

如果您将 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

$("#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;
}
于 2013-09-17T15:57:02.190 回答
-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();
});
于 2013-09-17T15:50:20.853 回答
-2

您不需要为此编写脚本（只要可以使用悬停元素中的 CSS 选择器“选择”目标元素 [例如需要出现的元素]）

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

看到这个演示小提琴

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 完成查看这个更新的小提琴

于 2013-09-17T15:43:33.397 回答