如何在悬停时使div淡出？

Question

嗨我目前有悬停时显示在图像上的跨度,但是我想使用一些javascript或css过渡使这个div在悬停时淡入大约0.8不透明度,然后在鼠标悬停时返回到0.

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

它的设置如何 - 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-transitions使用硬件加速,这真的非常流畅!除此之外,你甚至不需要任何Javascript或jQuery =)!