Jquery CSS鼠标悬停动画无法顺利运行答案

【问题标题】：Jquery CSS mouse hover animation not working smoothlyJquery CSS鼠标悬停动画无法顺利运行
【发布时间】：2014-07-06 23:58:31
【问题描述】：

我已经使用 jQuery 转换了 Flash 广告。一切正常，但我的鼠标悬停动画运行不顺畅。右下角有文字“Details”，当鼠标移到文字上时，整个容器变黑。我已将效果添加为：

       $('#disclaimer').hover(
            function () {
                $('#wrapper').addClass('hovered');
            }, function () {
                $('#wrapper').removeClass('hovered');
            }
        );

但它并不完美；有时它有效，有时则无效。如果我将鼠标移到“详细信息”的“D”字符上，则它不起作用。我在这里想念什么？每当我将鼠标移到“详细信息”字符上时，我希望这种效果能够顺利工作；它应该变黑。

有什么建议吗？？这是我的JsFiddle 代码。

【问题讨论】：

this fiddle 正在做你想做的事吗？
注意fiddle中的#headline3Txt元素没有关闭
您的解决方案工作正常，但是当我将鼠标移到详细信息文本上时，它会变成黑色，当鼠标移动到容器中的任何位置时，它仍然是黑色。我不希望这个我希望容器变黑只有鼠标悬停在详细信息文本上，一旦它从详细信息文本移开然后它应该变成正常
好的，那么，试试this
你能告诉我你做了什么改变吗？

标签： javascript jquery

【解决方案1】：

当您将鼠标悬停在 #Disclaimer 元素上时，您将多个元素设置为 display:none;，包括这个。

随着该元素消失，悬停事件不再处于活动状态，因此您最终会陷入无限循环。为避免这种情况，请改用opacity:0;，这将使您的元素保持原位但不可见。

另外，为了避免#disclaimer 移动，请将其设为position:absolute;。

Here is the JS Fiddle

CSS

.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn { opacity:0; }
.hovered #Image_logo img { opacity:0; }
.hovered #headlineText {  opacity:0; }
.hovered #disclaimer {  opacity:0; }

#disclaimer {
    /* ... */
    position:absolute;
    top: 168px;
    left: 235px;
}

【讨论】：

【解决方案2】：

我建议只使用 CSS :hover 属性，使用 javascript 进行像这样的简单样式更改是没有意义的。

您遇到了与父元素的悬停功能没有关联的特定元素的问题，可以通过向父元素的 CSS 添加规则并从那里开始工作来避免这种情况。

【讨论】：

你能给我一个例子吗

【解决方案3】：

这里的问题是，当显示悬停时，详细文本设置为无，因此悬停事件将调度，删除悬停类！

您可以通过更改免责声明悬停部分来解决此问题：

$('#disclaimer').mouseenter(
            function (e) {
                $('#wrapper').addClass('hovered')
                .mouseleave(function () {
                    $('#wrapper').removeClass('hovered');
                })
            });

所以当鼠标离开div时细节会消失，如果你想让它在移动时消失，你也可以将mouseleave更改为mousemove。

这是结果http://jsfiddle.net/r3BTU/2/

【讨论】：

是的，我现在只需要移动它就会变黑，如果鼠标从详细信息文本上移开，它应该会变正常
您的解决方案正在将容器变为黑色，但是当鼠标从详细信息文本中移开时，它应该会变为正常，而这并没有发生，并且鼠标在容器内移动然后它仍然是黑色

【解决方案4】：

您可以设置类（一个隐藏的和一个可见的）以及用js在类之间切换。

var movingElement = document.getElementById("messageDiv");
var disclaimer = document.getElementById("disclaimer");
disclaimer.onmouseover= function(){    
    movingElement.className="class2";    
};
disclaimer.onmouseout= function(){    
    movingElement.className="class1";   
};

您可以在 css 中添加过渡，以便可见类“淡入”。这是一个演示： http://jsfiddle.net/Nillervision/eSbzg/

【讨论】：