CSS鼠标悬停图片上图片变灰 变色 半透明
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伪类半透明效果。
CSS鼠标悬停图片上图片变灰 变色 半透明相关推荐
- Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...
- HTML/CSS鼠标悬停实现logo图片滑动切换
核心实现方法: 利用定位+透明度+设置外边距切换显示图片,过渡属性调节切换时间 整体盒子设置宽高背景色,利用伪元素设置要切换的两张图片 例子:小米logo左侧滑动切换 <!DOCTYPE htm ...
- html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰
我们常常在网页中看到这样一种效果,当你的鼠标移动到图片上的时候,图片变灰,或者变暗,这实际是图片被CSS设置为半透明样式.下面就给大家做一个实例看一下这种效果怎么实现a:hover img{filte ...
- css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果(代码实例)
本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放(缓慢变化,有过渡效果,缩放的过程是有动画过渡的)效果,主要用到CSS transform属性,css3 transition属性 ...
- html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
- css鼠标悬停图片剪辑路径效果
下载地址 一款css鼠标悬停图片剪辑路径效果,当鼠标悬停在图片上时,图片按一定路径放大的动画特效,生动形象,让图片灵活起来. dd:
- 鼠标悬停文字上显示图片
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- css鼠标悬停事件,css鼠标悬停特效
1.css父元素hover悬停 子元素缩放 .col-lg-4 img{ cursor: pointer; transition: all 1s ease; } .col-lg-4:hover img ...
- 鼠标放到图片上图片就变大
CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对 ...
最新文章
- 坐标系转换公式_【技术】西安80坐标与地方坐标系的转换方法技巧
- Android --- android.view.InflateException: Binary XML file line #7: Binary XML file lin... 类似问题的解决办法
- Java程序发送邮件
- 大规模计算时代:深度生成模型何去何从
- 二叉树的层次遍历_【腾讯面试热身题】二叉树层次遍历(动画展示)
- 创建consumer服务
- 丁腈橡胶自然老化时间_东莞元耀:解析抗UV老化试验箱正确的操作流程步骤
- 快慢结合搞定网站优化排名(二)-内链
- 22. Python 模块2
- Javascript String对象
- while语句 ///do...while语句/// for语句/// foreach语句
- 责任链模式实现及在Filter中的应用
- 杭州再发力!余杭又添一区块链产业园,携手巴比特欲打造创新应用示范区
- Delphi大师弗兰克·宝兰德(Frank Borland)回来了!
- VMware内CentOS-7-Minimal的安装与配置(详细图文教程)
- 光场相机模拟程序解读
- java+mysql crm客户关系区块链毕业管理系统设计与论文
- 在Windows上安装Elasticsearch 5.x
- openstack自动部署工具
- linux编译安装madam,madam、Linux LVM的使用
热门文章
- 前端开发之Nginx单页加载优化
- android 调用系统录制视频和音频
- 计算机 位操作系统吗,如何查看计算机是32位还是64位操作系统?
- 去阿里面试,面试前20分钟突然要求候选人展示过去的工作方案,候选人拒绝后,竟被取消面试!...
- 初学者如何画出自然眼线
- 谷歌建议提示,移除多余的关键字,为什么?
- 用百度进行爬虫练习和常见的问题
- Linux 服务器信息查看
- 用js将一个字符串数组输出为 `|` 分割的形式,比如“刘备|张飞|关羽”。
- 奥黛丽·郝本写真 落入凡间的天使 百年美女