悬停图像会使其变暗

hover an image makes it darker

本文关键字：图像 悬停      更新时间：2023-09-26

只是想知道如何将图像悬停使其变暗吗?使用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;
}

你可以使用黑色背景并设置不透明度

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

您可以使用: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: '';
}

使用opacity:

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

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

相关文章：