Question

这是我的第一个问题。我通常会尝试很好地研究这些事情，但这个让我发疯。

我需要能够做一些与你在这里看到的非常相似的东西（将鼠标悬停在方框上）： http://dev.ranvel.com/test-hover-method.html

问题是我得到的抖动。它看起来非常不专业。

我想使用CSS和HTML（而不是图像），因为最终会发生的事情是盒子后面会有文字，并且通过悬停，你会看到翻译。

我已经看到的是保持字体相同，删除粗体文本等等。这里，整个div正在改变而不仅仅是文本。我还看到了“过渡技巧”，你增加了过渡之间的时间。问题是，有时当鼠标在div上休息时，它处于“非悬停”状态。

提前致谢!!!

Answer 1

而不是可见性：隐藏;尝试使用不透明度：0;

.over:hover {
    opacity: 0;
}

http://jsfiddle.net/6WPHk/

您甚至可以在.over div：

上设置转换

.over {
    transition: opacity 0.3s;
}

Answer 2

让.over成为.under的孩子可能会更容易。

定位.over会更容易。
然后您可以将悬停选择器应用于.under，同时仍然可以应用可见性规则为.over。

JSFiddle

HTML

<div class="main">la la 
    <div class="under">
        <img class="over" src="//lorempixel.com/100/100" alt="">
        Bibendum Etiam Fermentum Mattis
    </div>
</div>

CSS

.under {
    position: relative;
}

.under:hover .over {
    display: none;
}

.over {
    position: absolute;
    top: 0;
    left:0;
}

CSS Hover抖动问题

2 个答案:

HTML

CSS