实现：当鼠标移动到按钮上面，切换按钮的背景图片。

html代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>按钮变化</title>
</head>
<body>
    <div id="btn_box">
        <button class="btn btnValid" id="btn_0" value="0"></button>
        <button class="btn btnInValid" id="btn_1" value="1"></button>
        <button class="btn btnInValid" id="btn_2" value="2"></button>
        <button class="btn btnInValid" id="btn_3" value="3"></button>
    </div>    
</body>
</html>

css代码为：

body,html{
        margin: 0;
        padding: 0;
        background-color: aliceblue;
        width: 100%;
        height: 100%;
    }
    #btn_box{
        width: 60%;
        height: 40%;
    }
    #btn_box .btn{
        width: 20%;
        height: 100%;
        border-radius: 8%;
    }
    .btnValid{
        /* background:url(./img/btnValid.png); */
        background:url(https://img-blog.csdnimg.cn/20191124210832769.png);
        background-size: 100% 100%;
    }

    .btnInValid{
        /* background: url(./img/btnInvalid.png); */
        background: url(https://img-blog.csdnimg.cn/20191124211127501.png);
        background-size: 100% 100%;
    }

js代码为：

$(function() {
    // $("#btn_box .btn").click(function() { //还可以换成点击事件
    $("#btn_box .btn").hover(function() { 
        var value = $(this).val();
        var btnId = "#btn_"+value;
        $(btnId).removeClass("btnInValid").addClass("btnValid");
        for(var i=0;i<4;i++) {
            if(i != value) {
                var inValidBtn = "#btn_"+i;
                $(inValidBtn).removeClass("btnValid").addClass("btnInValid");
            }
        }
    })
})