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