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

常用教程评论1,562 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;
}

到底是443还是433端口,啊?https? 常用教程

到底是443还是433端口,啊?https?

有的时候技术就是一门玄学。 很久很久之前,https是443还是433,就让我困惑了一阵子,后来我搞清楚了,是443,每次加SSL,放行443端口就可以了,大部分时间没出什么问题。 直到今天,我客户S...
诡异事件之PS总是自动启动 常用教程

诡异事件之PS总是自动启动

这个现象第一次发生的时候我没在意。发生十几次的时候我开始留意。但是没找到解决方案。启动后还报一个奇怪的错。 后来,我理解这个是PS版本的问题,于是删了重装。 然而这个问题仍然反复出现,PS一打开就会影...
清理Window.old文件夹,释放C盘空间 常用教程

清理Window.old文件夹,释放C盘空间

忽然发现C盘只剩7G的空间了,而我安装的那些个软件,并没有达到这种程度。而就在几天前,我这空间还有15G左右。 回忆了一下,这几天,更新了Windows系统。所以,我大概知道为什么了。 打开C盘,找到...
评论  0  访客  0

发表评论

匿名网友 填写信息

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

确定