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的方式是取代＆＃39;互相悬停。

尝试将此添加到您的css：

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

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

快速在它们之间盘旋时划分抖动

1 个答案: