1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img：
2、在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6：
3、打开浏览器，在浏览器内查看效果：
4、将鼠标移入图片，就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮，移开变变暗效果的演示：
1、新建一个html文件，命名为test.html。
2、在test.html文件中，使用div标签创建一个模块，并设置其id属性为tid，下面将通过该id设置其css样式。
3、在css标签内，对div进行样式设置，使用width属性设置div的宽度为200px，使用height属性设置div的宽度为20px，使用background属性设置div的背景颜色为红色。
4、在css标签内，再定义一个类名为newbg的样式，使用background属性设置背景颜色为黄色。
5、在test.html文件中，给div绑定onmouseover鼠标移动事件，当鼠标移动至div时，执行myfun（）函数。
6、在test.html文件中，在js标签内，创建一个myfun（）函数，在函数内，使用getElementById（）获得div对象，通过className（newbg）设置div的新背景颜色。
用css伪类hover可以实现这个功能。1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加p标签，为p标签添加内容：
2、为了方便演示，给div标签设置宽高和背景颜色，然后给p标签设置“display”属性，属性值为“none”，这样p标签中的文字默认情况下不会显示：
3、给div设置hover伪类，当鼠标移动到div区域时，设置p标签的样式为块级元素“block”：
4、这样当鼠标移动到div上时就会显示p标签内容，鼠标离开就不显示p标签内容：
