Question

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

现在我正在使用Jquery淡出页面加载，这样可以正常工作：

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

但是，我无法使用CSS在hover / unhover上淡入/淡出。这很奇怪，因为当用户在帖子上悬停/取消时，有几个其他链接出现/消失，我用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

可能是你的css转换不起作用，因为fadeOut函数在.t-share完全淡出时将display: none设置为$('.t-share') .mouseenter(function(){ $(this).fadeIn(200); }) .mouseleave(function(){ $(this).fadeOut(200); }) .fadeOut(6800);（我不确定它是否确实如此）。你可能想测试一下。

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

{{1}}

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

1 个答案: