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

【问题标题】：Transition from darkened image to non-darkened on mouse over with CSS/Javascript?使用 CSS/Javascript 在鼠标悬停时从变暗图像过渡到非变暗图像？
【发布时间】：2017-01-31 10:07:03
【问题描述】：

我试图得到这段代码的反效果 (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 代码，其中的图像变暗，并且在“鼠标悬停”时变暗消失 - 带有过渡。

【问题讨论】：

标签： javascript css hover fadeout mouseout

【解决方案1】：

您只需反转不透明度值 :)
（“base”背景的不透明度必须这是你小提琴的一个叉子：http://jsfiddle.net/m1mcb66h/

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

【讨论】：

这正是我想要的，它帮助我理解了代码的逻辑。非常感谢！

【解决方案2】：

我认为这应该可以解决问题

而不是

opacity:0.7;

写

filter: contrast(150%);

【讨论】：

谢谢，效果很好。

【解决方案3】：

我假设你的 .html 如下：

<a class='darken'><img src='image1.jpg'></a>
<a class='darken'><img src='image2.jpg'></a>

我是这样解决的：

    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;}

你的最后一个伪类也可以这样工作：

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

请为以后的问题提供 .html。

【讨论】：