Question

嗨我在父div中包含2个div（一个在彼此之上）。在悬停时我希望顶部div滑动你并显示它下面的红色div。我有点工作，虽然它不能平滑过渡，当我移动鼠标时会闪烁。我希望它保持位置，直到鼠标离开div区域然后平滑地滑回到其原始位置。我在下面添加了代码和jsfiddle。我真的很感谢你的帮助和投入！

HTML

<div class="block">
<div class="top"></div>
<div class="bottom"> Testing</div>
</div>

CSS

 .block{
  height:304px;
  width:304px;
  overflow: hidden;
 }

 .top{
   top: 0;
   height:300px;
   width:300px;
   border: solid 2px rgba(0,0,0,0.08);
 }

 .top:hover{
  margin-top: -304px; 
  display: block;  
  -webkit-transition:.43s ease;
  -moz-transition:.43s ease;
  -ms-transition:.43s ease;      
 }


.bottom{
  color: #f8f8f8;  
  height:300px;
  width:300px;
  background-color: #CF222D;
  border: solid 2px rgba(0,0,0,0.12);
 }

jsfiddle

Answer 1

您会看到这种情况发生，因为仅当您将鼠标悬停在.top元素上时才会应用悬停样式。当转换发生时，.top元素的命中区域会减少，并被.bottom元素替换..一旦.bottom元素扩展到鼠标所在的位置， CSS不再看到您将鼠标悬停在.top元素上，并反转转换。当样式发生争吵时，你会得到闪烁，不断在鼠标所在的位置来回移动。

您应该通过检查父元素的状态来应用悬停样式，如下所示：

.block:hover .top {  }

http://jsfiddle.net/4gBk2/5/

修改

作为旁注，您还应该将transition样式放在.top{ }选择器内部，因为这样可以确保正确的上下滑动。（这是一个很好的做法，因为这意味着转换始终存在，而且不仅仅是在运行的同时应用）

这是另一个例子：

http://jsfiddle.net/4gBk2/6/

div滑动时平滑过渡的问题

1 个答案: