用Jquery加载时淡出。然后，在悬停时淡入淡出，用CSS

在我的博客应用程序中，当首页加载时，我希望Twitter分享按钮（每个博客文章一个）淡出（这样用户就知道他们'在那里，但他们不会分散注意力）。当用户悬停在帖子上时，我想让分享按钮淡入，然后在未展开时再次淡出。用Jquery加载时淡出。然后，在悬停时淡入淡出，用CSS

现在我使用jQuery淡出在页面加载，并工作正常：

jQuery -> 
    $('.t-share').fadeOut(6800)

但是，我不能让它淡入/淡出悬停/ unhover使用CSS。这很奇怪，因为当用户在帖子上悬停/取消悬停时，有几个其他链接出现/消失，这是我用css转换实现的。但是，当我试图使.t-share div做同样的事情，它不起作用。该按钮上的display: none;属性不会更改，但它会更改为应该淡入的其他元素。

此外，当鼠标悬停在div上时，按钮淡出（需要6秒钟），I可以看到正在发生的CSS转换（它也添加了边框），但它会继续消失。

这里的CSS：

难道JS禁用CSS过渡不知何故？

在jquery淡出按钮加载后，如何使用CSS在悬停/取消悬停时淡入/淡出按钮？

如果不可能，JS解决方案是什么？

来源

2012-04-16 bevanb

代表性的HTML？ [演示]（http://jsfiddle.net/）？ – 2012-04-16 23:02:47

这可能是因为你的CSS转换不会起作用，因为淡出funcion设置.t-share到display: none时，它已经完全淡出（我不知道如果它）。你可能想要测试一下。

在此期间，你可以去100％的JS。这虽然不使用纯粹的CSS ...

$('.t-share') 
    .mouseenter(function(){ $(this).fadeIn(200); }) 
    .mouseleave(function(){ $(this).fadeOut(200); }) 
    .fadeOut(6800);

来源

2012-04-16 23:02:09 koenpeters

fadeout在6.8秒结束后将'.t-share'设置为'display：none'（它改变了不透明度，直到此时），但即使设置了它，它也不会退色。JS例子不会似乎没有工作 - 它淡化了，但不会在盘旋时消退。 – bevanb 2012-04-16 23:12:15

我认为它不会退色，因为当它的'display'设置为'none'时，没有元素可以移动鼠标。可以这么说，它不能被蒙蔽。你可以试着淡化它1％，这样它就隐藏起来了。使用fadeTo来做到这一点。 – koenpeters 2012-04-16 23:16:24

我的坏 - 忘了提及另一个元素（'.post'）触发其中'.t-share'元素的淡入/淡出。上面的JS工作。仍然好奇为什么CSS解决方案无法正常工作。 – bevanb 2012-04-16 23:26:10

用Jquery加载时淡出。然后，在悬停时淡入淡出，用CSS

回答

相关问题