最简单的翻转/悬停技术

Question

我很想知道人们认为当前最好的基本翻转动作--JQuery还是CSS？

我希望翻看这些状态:

• 正常:DIV中的文本段落
• 悬停:文本段落淡出,照片淡入,与文本位置相同
• OnMouseOut:照片淡出,文字淡入.

DIV和照片都是已知尺寸.

我在网上发现的90%仅限CSS翻转效果专门用于菜单,使用精灵,这不是我想要的,而另外10%的人正在争论是否:悬停是好习惯.

我很好奇人们认为现在最简单的技术 - 最少代码,最不复杂,最兼容.

如果没有添加翻转,HTML与此类似:

<div id="box1">
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p>
</div>

CSS是:

#box1 {
    width:403px;
    height:404px;
    background-image:url('../images/bio_square1.jpg');
    background-repeat:no-repeat;
    color:#fff;
}

Answer 1

正如其他人所说，对于跨浏览器兼容性，jQuery 是最佳选择。但如果你只想要 CSS，这里有一个使用过渡的快速而肮脏的 CSS3 选项：http://jsfiddle.net/wkhQA/2/

编辑：由于懒惰，我只包含了用于转换的 webkit 前缀。所以我想在 Chrome 或 Safari 中测试一下。道歉。