图片灰色,鼠标悬停后显示色彩的简单CSS代码

2019/10/1822:54:32 评论 99 views

先看下效果,即图片原本是有一个灰色的蒙版。鼠标滑过后会显示清晰的图片:

代码如下——其实就是给img属性加一个透明度,当hover悬停的时候,全部显示。否则只显示一半的透明度。

当然如果你这样加进去,会发现整个站点所有的图片全都带了灰色蒙版。这个需要你写个CSS的子类。比如.abcd开头的一个子类,替换下面的img,随后在图片的Class里面调用这个abcd就可以了。

img{
    opacity:0.5;
}
img:hover{
    opacity:1.0;<br />
}

示例如下:下列示例中,只需要class中调用abc,即可达到这种效果。

.abc{
    opacity:0.5;
}
.abc:hover{
    opacity:1.0;
}
原梓番主讲Excel进阶与提升视频课(淘宝在线观看)
Excel表格制作
PPT精品模板
Wordpress建站问题咨询解决

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: