Question

我试图在悬停div上添加转换延迟到我的翻转，从阅读我理解＆＃34; display:none＆＃34;不能有一个过渡延迟阻止我，它需要以另一种方式完成。

我尝试过使用z-index但没有成功并且还可以使用可见性，但是这会导致单独的问题，因为我将使用不同的文本和图像显示为defaut和hover，并且可见性功能正在影响间距，因为我相信它们仍然占据空间但不显示。

这是我到目前为止所做的：

在完全更改显示的div时，是否有人知道或者知道如何使用转换延迟进行翻转？用纯css，jquery还是javascipt？

谢谢！

Answer 1

您可以使用jQuery实现淡入淡出效果，

$(document).ready(function() {
  $(".parentItem").on("mouseover", function () {
    $(this).find('.itemDisplay').hide();
    $(this).find('.hoveredItem').fadeIn();
  });
});

这基本上是检查项目是否悬停，然后在新项目中淡出。

这是你案件的小提琴。 JSFiddle

然后你可以检查一个mouseout事件，

  $(".parentItem").on("mouseout", function () {
     $(this).find('.hoveredItem').hide();
     $(this).find('.itemDisplay').fadeIn();
  });

Answer 2

你可以通过不透明度的CSS来做到这一点。

.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px;width:33%;}


.hoveredItem{opacity:0;transition:opacity 1s;position:absolute;}
.itemDisplay{opacity:1;transition:opacity 1s;position:absolute;}
.parentItem:hover .hoveredItem {opacity:1; }
.parentItem:hover .itemDisplay{opacity:0;}

<div class="clearfix"></div>
<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>

<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>

<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>

翻转过渡延迟的div？

2 个答案: