CSS鼠标悬停图片上图片变灰 变色 半透明
来源:互联网 发布:股票交易模拟软件 编辑:程序博客网 时间:2024/05/18 01:32
CSS鼠标悬停图片上图片变灰 变色 半透明
DIV CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现,CSS鼠标悬停图片上图片变灰、图片变色、图片半透明
一、DIVCSS5介绍与说明: - TOP
看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被CSS设置为半透明样式。
二、关键CSS代码: - TOP
- a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}
此CSS代码作用,设置鼠标移动到A超链接时,超链接内图片(img)呈现半透明显示80%效果。
解释:
filter 设置平台IE半透明效果样式,值1-100,值越小越透明,设置IE8以前的透明使用
opacity 设置IE半透明效果样式,值0.1-1,值越小越透明,设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置,比如火狐,语法与IE相同
此设置CSS样式opacity、filter在IE6中不支持,因为现在IE6版本占有急剧下滑,所以一般不考虑IE6对此CSS的支持。
三、鼠标移动到图片变色,图片半透明实例 - TOP
实例案例描述:设置两个DIV盒子,两个盒子分别放入一张图,通过对其设置鼠标悬停(:hover)时图片半透明为80%和70%,观察其效果。
1、关键CSS代码
- .div1,.div2{ width:500px; margin:20px auto}
- .div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
- .div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}
这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。
阅读全文
0 0
- CSS鼠标悬停图片上图片变灰 变色 半透明
- CSS鼠标悬停图片上图片变灰 变色 半透明
- 鼠标悬停,图片变色
- CSS实现鼠标悬停图片时的边框变色效果
- CSS 鼠标悬停换图片
- css鼠标悬停 图片放大
- repeater鼠标悬停变色
- div鼠标悬停变色
- css实现鼠标悬停图片放大显示
- css实现鼠标悬停图片放大显示
- 鼠标经过图片时显示半透明文字,边框变色
- 鼠标经过图片时显示半透明文字,边框变色
- GridView鼠标悬停行变色
- css设置鼠标放到图片上图片放大效果
- CSS实现鼠标移动到图片上图片变大
- CSS图片阴影+鼠标移上图片放大、变形
- css 鼠标悬停事件
- 鼠标悬停图片变大
- 读《批判性思维》
- Windows与Linux下tftp服务的使用
- win7 sp1 mbr.asm
- 数据库的基本命令实战
- Thrift 介绍及java实例(1)
- CSS鼠标悬停图片上图片变灰 变色 半透明
- Centos搭建ceph+++十、再添加两个Monitor
- 如何在Struts2框架下对集合进行遍历
- 如何关闭freebsd的sendmail服务
- 【Codevs1282】 约瑟夫问题 树状数组 (11/1000)
- ionic2 ion-select 设置默认选项
- easyUI使用分页过滤器对数据进行分页操作
- Java中的经典算法之冒泡排序(Bubble Sort)
- 算法训练 最小乘积(基本型)