Divs 在它们之间快速悬停时抖动

Question

我有以下html代码：

<div class="project">
    <h3 class="black product">Dash</h3>
    <a href="#" class="black hide">view project</a>
</div>
<div class="project">
    <h3 class="black product">5/3/1</h3>
    <a href="#" class="black hide">view project</a>
</div>

以及下面的css代码：

.hide {
    display: none;
}

div.project:hover h3{
    line-height: 200px;
}

div.project:hover .hide {
    display: inline-block;
}

div.project {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border: 2px solid #222;
    margin: 0px 20px 20px 20px;
}

h3.product { font-size: 24px; line-height: 300px;}

这基本上只是两个并排的 div 按钮。当我将鼠标悬停在每个 div 上时，产品标题会向上移动并出现“查看产品”文本。

但是，当我在两个 div 之间快速悬停时，它们会上下“抖动”，并保持“抖动”。据我所知，这发生在 Safari 中，但不在 Chrome 中。

http://jsfiddle.net/f8Laktoz/ 这是 jsfiddle。

这是我第一次提出问题，如果我能更具体一些，请告诉我。任何帮助表示赞赏！提前致谢。

Answer 1

这似乎是 div 在悬停时相互“置换”的方式的错误。

尝试将其添加到您的 css 中：

div.project {
  ...
  float: left;
}

工作 JS 小提琴：http://jsfiddle.net/f8Laktoz/1/