html - 快速悬停在它们之间时消除抖动

我有以下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。
这是我第一次问问题，所以请告诉我是否可以更具体一些。感谢您的帮助！提前谢谢。

最佳答案

这似乎是一个虫子的方式跳水是'取代'对方悬停。
尝试将此添加到css：

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

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

关于html - 快速悬停在它们之间时消除抖动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33375477/