Jquery实现按钮背景图片的切换

最新推荐文章于 2022-11-10 08:56:30 发布

Aaron_1127

最新推荐文章于 2022-11-10 08:56:30 发布

阅读量2.2k

点赞数

分类专栏： # jquery 文章标签： jquery html+css 按钮背景图片切换

本文链接：https://blog.csdn.net/weixin_43398820/article/details/103228913

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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");
            }
        }
    })
})

Aaron_1127

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Jquery实现按钮背景图片的切换

实现：当鼠标移动到按钮上面，切换按钮的背景图片。html代码为：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
复制链接

扫一扫