0

我正在使用以下 jQuery 脚本：

$("#divid").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);   
});

如您所见，当鼠标悬停在名为 的超链接上时#hldiv，#divid应显示 。主要目标是DIV在鼠标悬停时保持显示DIV- 但#divid最初不应该是可见的。

如果鼠标移到超链接上，DIV应该会出现，当鼠标移到超链接上时DIV，它应该一直停留到鼠标离开。

问题是，使用我当前的代码，当用户移过超链接然后移出时 -DIV正确出现/消失，但是当用户移出超链接并移出DIV自身时，DIV也消失了。

我应该如何解决这个问题？

4

3 回答 3

1

为什么不添加一个容器并执行以下操作：

<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>

$(document).ready(function() {
    $("#hlDiv").hover(function() {
        $('#divId').show(1000);
    })
        $('#container').mouseleave(function(){
            $('#divId').hide(1000);
        });
});

在这里摆弄：http: //jsfiddle.net/w68YX/8/

于 2011-07-18T09:46:54.900 回答
0

如果我理解正确，重写 

$("#divid").mouseenter(function() {
    $('#divid').stop(true);
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);
});

可能会有所帮助，因为它会停止当前动画（淡出）并将其淡入（如果它已经变得有点透明）。

但是，这取决于您的 HTML，并且可能不适用于您的情况，因此请同时发布结构。

于 2011-07-18T09:23:37.677 回答
0

我参加这个聚会很晚了——但是有一个更好的方法可以做到这一点，所以为了未来的浏览器，我想添加它。这种效果根本不需要 jQuery 。

首先，将这两个项目包装在一个容器中（这里我使用带有 class 的 div container），并将一个类应用于您想要在 hove 上出现/消失的项目（这里我使用元素show-on-hover上的类）#divId

<div class="container">
  <a id="hlDiv" href="...">link text</a>
  <div class="show-on-hover" id="divId">popup stuff</div>
</div>

接下来，按如下方式设置您的 CSS：

.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }

#divId { /* whatever styles you want */ }

效果是悬停现在完全由 CSS 控制 - 但是，它没有您最初拥有的 1s 过渡。这有点复杂（目前在 IE 中不起作用 - 但从 IE10 开始将受支持）。

只需按如下方式更改 CSS：

.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }

.show-on-hover {
    -webkit-transition: opacity 1s; /* Chrome / Safari */
    -moz-transition: opacity 1s;    /* Firefox */
    -o-transition: opacity 1s;      /* Opera */
}

相对定位.container意味着容器为其子元素及其定位设置自己的边界框。这意味着当您将> .show-on-hover样式设置为 时position: absolute;，它仍将被限制在其父级（如果您设置left: 0;为示例，它将移动到 的左边缘.container，而不是屏幕）。

切换现在opacity只是使绝对定位的项目显示/消失在您放置它的任何位置（并且您将更新 CSS 以将其准确放置在您想要的位置，相对于超链接）。因为我们不再使用display: none-DIV将始终占用屏幕上的空间 - 即使在隐藏时（这可能不是您想要的）。

最后 - 设置转换的最后一个块告诉现代浏览器，每当 class 元素的不透明度发生变化时.show-on-hover，都会使该变化发生在 1 秒的补间中。

这是一个显示转换的 jsFiddle：http: //jsfiddle.net/TroyAlford/nHrXK/2

这是一个只显示切换的 jsFiddle：http: //jsfiddle.net/TroyAlford/nHrXK/3/

于 2013-03-07T18:20:42.143 回答