1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img：
2、在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6：
3、打开浏览器，在浏览器内查看效果：
4、将鼠标移入图片，就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮，移开变变暗效果的演示：
通常可以使用css样式的 :hover 选择器， 如示例div1。
也可以使用js来控制css样式，用js可以灵活加入其它效果(延迟显示、随机背景图)， 如示例div2。
示例代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1{
width: 150px
height: 150px
}
.d1:hover{ /*在这里使用hover 来改变背景图 */
background:url(2531170_142659950000_2.jpg)
}
.d2{
width: 150px
height: 150px
}
</style>
</head>
<body>
<div class="d1">
div1
</div>
<div class="d2" onmouseover="showbg(this)" onmouseout="hidebg(this)"> <!--分别设置了鼠标进入、离开的事件 -->
div2
</div>
</body>
<script>
function showbg(e){
e.style.background="url(2531170_142659950000_2.jpg)" //用javascript来改变背景图片样式
}
function hidebg(e){
e.style.background="none"
}
</script>
</html>
*具体选择根据需要灵活应用
*注意示例图片要引用正确
不用那么麻烦，活用a标签就可以了<style type="text/css">
a.home {background:url(鼠标滑过之前的图片地址) no-repeatwidth:100pxheight:20pxdisplay:inline-block_float:left}
a.home:hover {background:url(鼠标滑过的图片地址) no-repeat
</style>
<div>
<a href="http://www.baidu.com" class="home">首页</a>
</div>
这样就可以实现有链接的可以换图的效果
