jquery通过将鼠标悬停在另一个元素上来动画一个元素答案

【问题标题】：jquery animate one element by hover over anotherjquery通过将鼠标悬停在另一个元素上来动画一个元素
【发布时间】：2011-09-18 18:23:59
【问题描述】：

我在 jquery 中有一个成功的（几乎）动画，但现在需要一个文本说“点击”。每当我将鼠标悬停在一个因过度事件而变宽的 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

有什么线索吗？

【问题讨论】：

标签： jquery hover jquery-animate

【解决方案1】：

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

.offset()

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

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

【讨论】：

【解决方案2】：

这完成了你想要的。它使用 .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

【讨论】：