javascript - 使用 CSS/Javascript 在鼠标悬停时从变暗图像过渡到非变暗图像？

Question

我正在尝试获得这段代码的反效果 (jsfiddle-demo):

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;    
}

div.hoverText{display = none;}

我的意思是，我想要一个 html 代码，其中它的图像变暗并且暗度在“鼠标悬停时”消失 - 带有过渡。

Answer 1

你只需要反转不透明度值:)
(“基础”背景的不透明度必须 < 1，“:hovered”背景的不透明度必须 = 1)
这是你的 fiddle fork :http://jsfiddle.net/m1mcb66h/

a.darken img {
  [...]
  opacity: 0.7;
}
a.darken:hover img {
  opacity: 1;
}