最简单的翻转/悬停技术答案

【问题标题】：Simplest rollover/hover technique最简单的翻转/悬停技术
【发布时间】：2023-12-09 07:15:01
【问题描述】：

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

我想要这些状态的翻转：

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

DIV 和照片都是已知尺寸。

我在网上找到的 90% 的纯 CSS 翻转效果是专门用于菜单的，使用精灵，这不是我想要的，另外 10% 正在争论 :hover 是否是好的做法.

我很好奇人们认为当今最直接的技术是什么——最少的代码、最少的复杂性、最兼容的技术。

还没有添加翻转，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;
}

【问题讨论】：

淡入淡出效果还没有很好地融入浏览器，大部分都在测试中。
OK- 褪色是这个过程中最不重要的部分，一个不错的选择，但不是必需的。因此，如果它只在精品浏览器中有效，只要图像翻转在大多数情况下都有效。

标签： jquery html css rollover

【解决方案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;
   }

最后，我可能会为 .mouseover() 或 .hover() 使用 jquery 库：

$("#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()。那里的演示有一个类似于您可能正在寻找的东西的现场示例，它正在使用另一种方法。

希望这会有所帮助！ =)

【讨论】：

【解决方案2】：

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

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

【讨论】：

我现在正在使用这种方法，效果很好，谢谢！

【解决方案3】：

对于跨浏览器的兼容性，jQuery 将是要走的路。此外，您想要的听起来比简单地更改悬停样式要复杂一些。例如，您将照片的淡入绑定到段落的淡入末尾。在纯 CSS 中无法做到这一点。

【讨论】：