0

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

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

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

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

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

提前致谢!!!

4

2 回答 2

5

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

.over:hover {
    opacity: 0;
}

http://jsfiddle.net/6WPHk/

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

.over {
    transition: opacity 0.3s;
}
于 2013-08-30T20:55:57.257 回答
0

制作. .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;
}
于 2013-08-30T21:27:15.650 回答