Question

我的网站上有一个很好的ToTop按钮，正如你在这里看到的那样：

The following link is with css transition

http://jsfiddle.net/Zvz6G/

我得到了一些不错的悬停效果，但问题是通过使用Transition来获得漂亮的悬停效果，我正在丢失我的fadeIn / fadeOut效果以显示问题，这里的代码与上面的代码相同而没有转换：< / p>

The following link is without css transition

http://jsfiddle.net/tGeh2/

正如你现在所看到的，我得到了我的fadeIn / fadeOut效果，但我失去我的悬停效果，我的问题是：这是什么原因以及怎样才能我解决它，谢谢大家，祝你有个美好的一天。

Answer 1

根据您的代码，您可以定义一个新类，该类禁用 CSS转换，并在启动fadeOut效果之前将其添加到滚动到顶部按钮，然后在fadeOut效果完成后删除它们，我更改了您的代码并修复了您的问题，您可以在this fiddle中看到我的更改。

Answer 2

我删除了css并使用jquery添加它。 http://jsfiddle.net/andaywells/Zvz6G/25/embedded/result/

在这里查看： http://jsfiddle.net/andaywells/Zvz6G/25/

$('.scrollUp').hover(function () {
    $('.scrollUp').fadeOut(500).delay(100);
});

$('.scrollUp').mouseleave(function () {
    $('.scrollUp').fadeIn(500).delay(100);
});

希望这会有所帮助。这将得到所有浏览器的支持，防止等等的不一致。

悬停效果不适用于CSS过渡

2 个答案: