jquery通过将鼠标悬停在另一个元素上来对一个元素进行动画处理

发布于 2024-12-05 14:16:19 字数 485 浏览 2 评论 0原文

我在 jquery 中有一个成功的（几乎）动画，但现在需要一个显示“单击”的文本。每当我将鼠标悬停在因 over 事件而变宽的 div 上时就会出现。该事件使进入时的 div 变宽，离开时变窄，这是有效的。

所以，我想要的是这样的：

if($( this).width() >= "25") //  if the width is greater than 25
    $("#clickme").css('opacity', 0) // - effect a DIFFERENT id which is my "click.."

当然，在鼠标离开时，做相反的事情。到目前为止我无法让它工作

我在粘贴箱中有jquery部分 http://pastebin.com/AQwLeBbc

有什么线索吗？

原文

I have a successful (almost) animation in jquery but now need a text saying "click." to appear whenever I hover over a div which is made wider by a over event. The event makes the div wider upon entering and narrower upon leaving, and this works.

So, what I want is something like this:

if($( this).width() >= "25") //  if the width is greater than 25
    $("#clickme").css('opacity', 0) // - effect a DIFFERENT id which is my "click.."

and of course upon mouse leave, do the opposite.
I can't get this to work thus far

I have the jquery portion in paste bin http://pastebin.com/AQwLeBbc

Any clues?

分享到QQ

分享到微博

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

发布评论

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

海拔太高太耀眼 2024-12-12 14:16:19

如果要将 div 定位在其他元素上，可以使用 css 的固定或绝对定位。
您可以通过以下方式获取当前悬停元素的位置：

.offset()

http://api.jquery.com/ offset/

然后使用 offset() 设置悬停 div 的位置。
如果您希望 div 悬停在所有内容上，最好将其作为 body 的第一个元素。

If you want to position a div over another elements, you can use a fixed or absolute positioning with css.
You can get the position of the current element that is being hovered upon with:

.offset()

http://api.jquery.com/offset/

Then use offset() to set the position of your hovering div.
If you want the div to hover over everything, its best to put it as the first element of the body.

回复收藏 0 原文

屌丝范 2024-12-12 14:16:19

这样就可以实现你想要的效果了。它使用 .hover() 函数为对象分配两个处理程序，一个在鼠标进入时，一个在鼠标离开时。

$('.selector').each(function() {
        var clicktext = null;
        $(this).hover(function() {
                var pos = $(this).offset();
                // add the click text and assign it to the proper variable
                // this code can be changed to what ever it takes for your code
                // just make sure to leave the zIndex at a greater than 0 value
                // and the position values as they are. Padding, etc. are optional.
                clicktext = $('<div>').css({
                        zIndex: 1000,
                        padding: "2px",
                        position: "absolute",
                        left: pos.left,
                        top: pos.top
                }).text("click").appendTo('body');
        }, function() {
            clicktext.remove();
        });
});

-Sunjay03

This accomplishes what you want. It uses the .hover() function to assign two handlers to the object, one on mouse in, one on mouse out.

$('.selector').each(function() {
        var clicktext = null;
        $(this).hover(function() {
                var pos = $(this).offset();
                // add the click text and assign it to the proper variable
                // this code can be changed to what ever it takes for your code
                // just make sure to leave the zIndex at a greater than 0 value
                // and the position values as they are. Padding, etc. are optional.
                clicktext = $('<div>').css({
                        zIndex: 1000,
                        padding: "2px",
                        position: "absolute",
                        left: pos.left,
                        top: pos.top
                }).text("click").appendTo('body');
        }, function() {
            clicktext.remove();
        });
});

-Sunjay03

回复收藏 0 原文

~没有更多了~