CSS鼠标经过图片变亮,移开变变暗效果代码怎么写

html-css015

CSS鼠标经过图片变亮,移开变变暗效果代码怎么写,第1张

1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img：

2、在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6：

3、打开浏览器，在浏览器内查看效果：

4、将鼠标移入图片，就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮，移开变变暗效果的演示：

你这种效果纯CSS是搞不出来的，我这有个类似的，你看看行不行

div{

    float: left

    width: 180px

    height: 180px

    margin: 0 auto

    background: url(Zombatar_1.jpg) center center no-repeat

    z-index: 1

}

a{

    filter: alpha(opacity=80)

    opacity: 0.8

    width: 180px

    height: 180px

    display: block

    background: #333

    z-index: 100

}

a:hover{

    filter: alpha(opacity=0)

    opacity: 0

} <div><a href="#"></a></div>

<div><a href="#"></a></div>

<div><a href="#"></a></div>

ie7，8，9测试通过，谷歌测试通过，其余的浏览器没测