首页 > 源码教程 > 其他源码教程

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

ok佬 2024-12-07 15:42:21 人看过

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



© 版权声明

发表评论

加载中~

编辑推荐

热门文章

OK资源库是一家专注各类源码分享,绿色软件分享,资源接口分享,福利线报分享,源码教程。我们每日更新免费可靠的资源,注册就是VIP会员更深受用户好评,是您首选的资源下载站
Copyright © 2023-2024 OK资源库 版权所有 琼ICP备202309987431号-1