html - CSS Hover 抖动问题

Question

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

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

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

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

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

提前致谢！！！

Answer 1

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

.over:hover {
    opacity: 0;
}

http://jsfiddle.net/6WPHk/

你甚至可以在.overdiv 上设置一个过渡：

.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;
}