CSS代码鼠标经过图片变换图片的两种方法

CSS代码鼠标经过图片变换图片方法如下：

方法一：

在css中，可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果，只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width: 380px;
                height: 250px;
                background-image: url(1.png);
            }
            div:hover{
               width: 380px;
                height: 250px;
                background-image: url(2.png);
            }
        </style>
    </head>
    <body>
        <div>鼠标移动到图片上</div>
    </body>
</html>

方法二：

<img src="#" name="picture" width="330" height="210" border="0" align="middle"  onMouseOver="this.src='#'" onMouseOut="this.src='#'">

相关文章：

你感兴趣的文章：

标签云：