Question

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

我想要翻看这些状态：

正常：DIV中的文字段落
悬停：文字段落淡出，照片淡入，与文字位置相同
OnMouseOut：照片淡出，文字淡入。

DIV＆amp;照片都是已知尺寸。

我在网上发现的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。

我的HTML会是这样的：

<div id="box">

   <div class="box-img">

         <img src="image.jpg"/>

   </div>

   <div class="box-text">

         Lorem ipsum

   </div>

</div>

之后我的CSS会像：

#box{
   width:500px;
   height:500px;
   padding:0;
}

   .box-img{
       position:absolute;
       opacity:0;
   }

   .box-text{
       position:absolute;
   }

最后，我可能会将jquery库用于.mouseover（）或.hover（）：

$("#box").hover(
  function () {
    $(".box-img").fadeTo("100,1");
    $(".box-text").fadeTo("100,0");
  }, 
  function () {
    $(".box-img").fadeTo("100,0");
    $(".box-text").fadeTo("100,1");
  }
);

这可能不是最佳方法，但我认为可能存在的粗略思想就在那里。

您可以在jQuery API看到.hover（）。那里的演示有一个类似于你可能正在寻找的东西的实例，它采用了另一种方法。

希望这有帮助！ =）

Answer 2

对于跨浏览器兼容性，jQuery将是最佳选择。此外，你想要的东西听起来比简单地改变悬停时的样式要复杂一些。例如，您将照片的淡入到段落淡入的结束。在纯CSS中无法实现这一点。

Answer 3

正如其他人所说，对于跨浏览器的兼容性，jQuery是可行的方法。但如果你只想要CSS，那么使用过渡的快速而又脏的CSS3选项：http://jsfiddle.net/wkhQA/2/

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

最简单的翻转/悬停技术

3 个答案: