1

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

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

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

但是，我无法让它在使用 CSS 的悬停/取消悬停时淡入/淡出。这很奇怪，因为当用户悬停/取消悬停在帖子上时，还有几个其他链接会出现/消失，这是我使用 css 转换实现的。但是，当我试图让.t-sharediv 做同样的事情时，它不起作用。按钮上的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 解决方案是什么？

4

1 回答 1

0

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

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

$('.t-share')
  .mouseenter(function(){ $(this).fadeIn(200); })
  .mouseleave(function(){ $(this).fadeOut(200); })
  .fadeOut(6800);
于 2012-04-16T23:02:09.357 回答