jQuery Mouseenter 和 mouseleave 操作

发布于 2024-11-24 21:32:39 字数 680 浏览 2 评论 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 也会消失。

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

原文

I am using the following jQuery script:

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

As you can see, when the mouse hovers over a hyperlink called #hldiv, the #divid should be shown. The main goal is to keep the DIV shown if the mouse is over the DIV - but the #divid should not be visible initially.

If the mouse moves over the hyperlink, the DIV should appear, and when the mouse then moves over the DIV, it should stay until the mouse leaves.

The problem is that with my current code, when the user moves over the hyperlink and then out - the DIV appears/disappears correctly, but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.

How should I fix this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抱猫软卧 2024-12-01 21:32:39

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

<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/

Why don't you add a container and do:

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

fiddle here: http://jsfiddle.net/w68YX/8/

回复收藏 0 原文

心病无药医 2024-12-01 21:32:39

如果我理解正确，重写

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

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

然而，这取决于您的 HTML，并且可能不适用于您的情况，因此也请发布结构。

If I understood right, rewriting

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

Might help, since it stops the current animation (fading out) and fades it back in (if it has already turned a bit transparent).

However this depends on your HTML, and might not work in your case, so please post the structure also.

回复收藏 0 原文

迷迭香的记忆 2024-12-01 21:32:39

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

首先，将这两个项目包装在一个容器中（这里我使用的是带有 container 类的 div），然后应用您想要在悬停时显示/消失的项目的类（这里我在 #divId 元素上使用 show-on-hover 类）

<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 控制 - 但是，它没有您最初拥有的 1 秒转换。这有点复杂（目前在 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 将始终占用屏幕上的空间 - 即使隐藏时（这可能不是您想要的）。

最后 - 最后一个块，设置过渡，告诉现代浏览器，每当 .show-on-hover 类的元素的不透明度发生变化时，使该变化以超过 1 秒的持续时间进行补间。

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

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

I am very late to this party - but there is a far better way to do this, so I want to add it for the sake of future browsers. You don't need jQuery for this effect at all.

First, wrap the two items in a container (here I'm using a div with class container), and apply a class to the item you want to appear/disappear on hove (here I'm using the show-on-hover class on the #divId element)

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

Next, set up your CSS as follows:

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

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

The effect is that the hover is now controlled entirely by CSS - but, it doesn't have the 1s transition you originally had. This is a little more complicated (and currently doesn't work in IE - but will be supported as of IE10).

Simply change the CSS as follows:

.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 */
}

The relative positioning on the .container means that the container sets its own bounding boxes for its child elements and their positioning. This means that when you then set the > .show-on-hover styling to position: absolute;, it will still be constrained to its parent (if you set left: 0; as an example, it will move to the left edge of the .container, rather than the screen).

The opacity toggle now simply makes the absolutely positioned item show/disappear wherever you've placed it (and you would update the CSS to put it exactly where you want, relative to the hyperlink). Because we're no longer using display: none - the DIV will always take up space on the screen - even when hidden (which is probably not what you want).

Finally - the last block, which sets transitions, tells modern browsers that whenever the opacity changes on elements of class .show-on-hover, make that change happen as a tween over 1s of duration.

Here is a jsFiddle showing the transitions: http://jsfiddle.net/TroyAlford/nHrXK/2

And here is a jsFiddle showing just the toggle: http://jsfiddle.net/TroyAlford/nHrXK/3/

回复收藏 0 原文

~没有更多了~