javascript - 悬停图像使其变暗

Question

只需要知道悬停图像如何使其变暗？使用 jquery /css。

我的 CSS

.img-files{
    background:url("/Images/syzs.png") no-repeat; 
    position:absolute;
    background-size:90%;       
    width: 100px;       
    height: 150px;
    text-indent: -9999px; 
    z-index:1;
}

Answer 1

您可以使用具有不透明度属性的黑色背景使其更好

演示

.dark {
    display: inline-block;
    background: black;
}

.dark img {
    display: block;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
}

.dark:hover img {
    opacity: 0.5;
}

Answer 2

您可以使用:hover伪类和::after伪元素的组合来做到这一点。

工作演示

<div>
    <img src="http://aux3.iconpedia.net/uploads/69290979.png" />
</div>

div {
    position: relative;
    display: inline-block;
}
img {
    width: 100px;
    height: 100px;
}
div:hover::after {
    position: absolute;
    z-index: 1;
    background-color: black;
    opacity: 0.7;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: '';
}

Answer 3

使用opacity：

.img-files {opacity: 0.5;}
.img-files:hover {opacity: 1;}

小提琴：http: //jsfiddle.net/praveenscience/V7cFn/