CSS悬停抖动问题 [英] CSS Hover jitter issue

问题描述

这是我的第一个问题。我通常尝试研究这些东西，但这一个正在驱使我疯了。

This is my first question. I usually try to research these things well, but this one is driving me crazy.

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

I need to be able to do something very similar to what you see here (hover over the box): http://dev.ranvel.com/test-hover-method.html

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

The problem is the jitter that I get. It looks very unprofessional.

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

I want to use CSS and HTML (and not images) because what will eventually happen is there will be words behind the box and by hovering, you will see a translation.

我已经看到的东西就像保持字体一样，删除粗体文本等。这里，整个div正在改变，而不仅仅是文本。我也看到了转换技巧，你增加了转换之间的时间量。问题是，有时当鼠标在div上休息时，它处于非悬停状态。

What I've seen already are things like keeping the fonts the same, removing bold text, etc. Here, the whole div is changing and not just the text. I've also seen the "transition trick" where you increase the amount of time between the transitions. The problem is that sometimes when the mouse comes to a rest over the div, it is in its "non-hover" state.

提前感谢!!!

推荐答案

隐;尝试使用不透明度：0;

Instead of visibility: hidden; try using opacity: 0;

.over:hover {
    opacity: 0;
}

http://jsfiddle.net/6WPHk/

您甚至可以在上设置转换。 div：

You can even setup a transition on the .over div:

.over {
    transition: opacity 0.3s;
}

这篇关于CSS悬停抖动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！