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

Question

在我的博客应用程序中，当首页加载时，我希望 twitter 分享按钮（每个博客帖子一个）淡出（这样用户就知道它们在那里，但它们不会分散布局的注意力）长）。当用户将鼠标悬停在帖子上时，我希望分享按钮淡入，然后在未悬停时再次淡出。

现在我正在使用 Jquery 在页面加载时淡出，效果很好：

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

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

此外，当按钮淡出时（需要 6 秒）将鼠标悬停在 div 上时，我可以看到发生 CSS 转换（它还添加了边框），但它继续淡出。

这是 CSS：

&:hover {
    .t-share {
        display:inline-block;
        position:absolute;
        right:8px;
        top:8px;
        border:2px solid red;
    }

JS 是否以某种方式禁用了 CSS 过渡？

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

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

Answer 1

这可能是因为当它完全淡出时，fadeOut 函数将.t-share 设置为display: none，所以您的css 转换不起作用（我不确定是否如此）。您可能需要对此进行测试。

与此同时，您可以选择 100% JS。虽然这不使用纯 CSS...

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