html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰

我们常常在网页中看到这样一种效果，当你的鼠标移动到图片上的时候，图片变灰，或者变暗，这实际是图片被CSS设置为半透明样式。下面就给大家做一个实例看一下这种效果怎么实现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的支持。

鼠标移动到图片变色，图片半透明实例

实例案例描述：设置两个DIV盒子，两个盒子分别放入一张图，通过对其设置鼠标悬停(:hover)时图片半透明为80%和70%，观察其效果。

1、关键CSS代码.p1,.p2{ width:500px; margin:20px auto}

.p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}

.p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}

这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。

2、关键HTML代码

鼠标移动到图片悬停时，图片变色滤镜效果：

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰相关推荐

html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
php网站灰颜色代码,css取消Safari浏览器链接点击颜色变灰-webkit-tap-highlight-color_html/css_WEB-ITnose...
给可点击的元素添加代码: -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color 是一个不规范的属性(unsupp ...
实现图片从远到近css,如何利用景深效果，使图片近大远小，我的demo怎么是近小远大，代码如下：...
想要的效果是,旋转到屏幕前变大,旋转到屏幕里面变小(近大远小). img_3D @keyframes an1{ 0%{ transform: rotateY(0deg) ; } 50%{ trans ...
CSS鼠标悬停图片上图片变灰变色半透明
CSS鼠标悬停图片上图片变灰变色半透明 DIV CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现,CSS鼠标悬停图片上图片变灰.图片变色.图片半透明一.DIVCSS5介绍与说明: - ...
Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...
Java添加图片的悬浮提示,DIV+CSS鼠标经过悬停在图片上方显示图片文字
原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们 ...
CSS 中鼠标悬停图片旋转
CSS 中鼠标悬停图片旋转 w3school 中 transfrom 说明主要使用的属性就是 transfrom 第一种情况 1.1 说明当鼠标放到图片上之后图片旋转, 这里的图片给的是背景图 ...
背景图片用css能隐藏吗,用css实现鼠标悬停时隐藏背景图片的问题
用css实现鼠标悬停在导航文字连接上时隐藏导航的背景图片为什么我的鼠标悬停在导航上时,背景图片还在啊? css代码如下: body{ margin:0; padding:0; background: ...

html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰

html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰相关推荐

最新文章

热门文章