javascript - 如何使 div 在悬停时淡出？

Question

您好，我目前有跨度显示鼠标悬停在图像上，但是我想使用一些 javascript 或 css 转换使此 div 在悬停时淡入大约 0.8 不透明度，然后在鼠标不悬停时返回 0 .

这是到目前为止我如何设置它的示例，现在所需要的只是淡入淡出和 0.8 不透明度:

How its setup - Jsfiddle

我确定有人必须执行一些简单的代码

非常感谢您的帮助谢谢!

Answer 1

所以...这是执行此操作的 CSS3/HTML5 方式。但这在 IE 中不起作用:它会返回到常规的、立即的方式(所以它确实起作用，只是不如在真正的浏览器中那样流畅)。

div.yourDiv {
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

div.yourDiv:hover {
    opacity: 0.8;
}

由于 CSS3 过渡使用硬件加速，这真的很流畅!除此之外，您甚至不需要为此使用任何 Javascript 或 jQuery =)!