如何避免内部 div 中的内容在悬停时首先出现？答案

【问题标题】：How to avoid content in the inside div appearing first on hover?如何避免内部 div 中的内容在悬停时首先出现？
【发布时间】：2016-09-29 08:04:23
【问题描述】：

我在悬停时创建了一个扩展 div。这是我创建的 Fiddle

.outer {
  height: 100px;
  width: 200px;
  border: 1px solid #000;
  overflow: hidden;
  transition: height 0.8s;
  -webkit-transition: height 0.8s;
}

.innerone {
  height: 100px;
}

.outer:hover {
  overflow: visible;
  height: 160px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>

<div class="outer">
  <div class+="innerone">

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
  <div class+="inner">



    <button type="button" class="btn btn-default">Default</button>
  </div>
</div>

  http://jsfiddle.net/ab4Lfdhu/35/

但问题是扩展 div 中的内容甚至在 div 完成其完全扩展转换之前首先出现。如何避免呢？

【问题讨论】：

标签： html css css-selectors css-transitions

【解决方案1】：

对于转场，可以使用jQuery的如下sn-p来检测动画是否结束：

$(".outer").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    overflow: visible;
});

小提琴示例：http://jsfiddle.net/db3p5nrv/

【讨论】：

谢谢杰森 :)
少写代码是个好习惯，所以最好接受我的回答而不是写更多代码。

【解决方案2】：

.outer:hover {
  overflow: visible;
  height: 160px;
}

删除overflow: visible; 它应该可以正常工作。

【讨论】：