纯css实现鼠标悬停列表图片半透明高亮效果 -懒人源码

纯css实现鼠标悬停列表图片半透明高亮效果

作者/代码整理：懒人 (转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：2014-06-06

不需要js即可实现的鼠标悬停图片高亮效果。当然，其中添加了一些css3代码，高版本浏览器下效果更好。

原理：鼠标悬停在整个div上的时候，让所有li标签的背景颜色变为黑色，同时设置所有图片不透明度为50%，这样看起来所有图片上好像蒙上了一层阴影。

然后再给具体鼠标悬停的图片的不透明度设为100%即可实现我们想要的效果。

核心css代码请见附件lanrenzhijia.css中 8-10行样式代码

声明：凡标题注明“懒人原生”二字，均为本站原创，非书面授权谢绝转载