jQuery鼠标悬停的时候图片替换

作者: 祈澈菇凉 | 来源:发表于2019-09-18 15:29 被阅读0次

jQuery鼠标悬停的时候图片替换
jQuery图片放大插件鼠标悬停图片放大效果
ajax无法使用
jquery图片放大插件鼠标悬停图片放大效果
web常用库
jQuery（样式和DOM）
动画效果
关于jquery
JQuery学习笔记
CSS3实现文字移动

需求：当鼠标放在按钮上的时候，按钮图片会变成另外一张图片，但鼠标离开的时候，图片恢复原本状态。

大致实现demo是这样的：其实就是一个鼠标划过事件，来控制css的背景图片的属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>柱状图折线图混合使用</title>
    </head>
    <style>
        #remove {
            width: 40px;
            height: 20px;
            border: none;
            color: #FFFFFF;
            background: url(images/delete.png);
            background-size: 100% 100%;
        }
    </style>
    <body>
        <div id="remove"></div>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $("#remove").hover(function() {
            $(this).css("background-image", "url(images/delete1-1.png)");
        }, function() {
            $(this).css("background-image", "url(images/delete.png)");
        });
    </script>
</html>

CSS鼠标悬停的时候图片替换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS代码鼠标经过图片变换图片</title>      
    </head>
    <body>
    <img src="images/delete.png" name="picture" width="330" height="210" border="0" align="middle" 
 onMouseOver="this.src='images/delete1-1.png'" onMouseOut="this.src='images/delete.png'">
    </body>
</html>