欢迎光临
我们一直在努力

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='#'">

 

赞(0) 打赏
未经允许不得转载:新起点博客 » CSS代码鼠标经过图片变换图片的两种方法


关注公众号『新起点软件管家』

获取最新网络资源及破解软件!
带你玩转各样软件...

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏