CSS Hover 抖动问题

Question

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

我需要能够执行与您在此处看到的非常相似的操作（将鼠标悬停在框上）： http://dev.ranvel.com/test-hover-method.html

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

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

我已经看到了诸如保持字体不变、删除粗体文本等内容。在这里，整个 div 都在发生变化，而不仅仅是文本。我还看到了“过渡技巧”，您可以在其中增加过渡之间的时间。问题是，有时当鼠标停在 div 上时，它处于“非悬停”状态。

提前致谢！！！

Answer 1

而不是可见性：隐藏；尝试使用 opacity: 0;

.over:hover {
    opacity: 0;
}

http://jsfiddle.net/6WPHk/

您甚至可以在.over div 上设置过渡：

.over {
    transition: opacity 0.3s;
}

Answer 2

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

1. 定位.over会容易得多。
2. 然后您可以将悬停选择器应用到.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;
}