html - 快速在它们之间盘旋时 Div 抖动

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 fiddle :http://jsfiddle.net/f8Laktoz/1/