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

Question

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

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

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

但是，我无法使用 CSS 使其在悬停/取消悬停时淡入/淡出。这很奇怪，因为当用户将鼠标悬停/取消悬停在帖子上时，还有其他几个链接会出现/消失，我使用 css transitions 实现了这些链接。但是，当我试图让 .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

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

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

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