删除按钮的阴影，当其活动（点击） [英] remove shadow of a button when its active ( clicked )

问题描述

我有这个CSS的按钮动画和其他：

I have this CSS for buttons animation and else :

.btnliner {
    background: url(../images/btnbg.png) no-repeat center -105px;
    /* Fallback */
    display: block;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    background: url(../images/stripes.png) no-repeat 0px 0px, url(../images/btnbg.png) no-repeat center -8px;
    -moz-box-shadow: 2px 2px 10px #000;
    -webkit-box-shadow: 2px 2px 10px #000;
    -o-box-shadow: 2px 2px 10px #000;
    box-shadow: 2px 2px 10px #000;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.btnliner:hover {
    background: url(../images/btnbg.png) no-repeat center -5px;
    /* Fallback */
    background: url(../images/stripes.png) no-repeat 0px -200px, url(../images/btnbg.png) no-repeat center -8px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

这是我的JS：

$(document).ready(function () {
    $("#button1").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button1").css("border", "3px solid red");
            $("#button1").css("backgroundimage", "url (../images/btnbg.png)", "!important");
        });
    });
});

$(document).ready(function () {
    $("#button2").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button2").css("border", "3px solid red");
        });
    });
});


$(document).ready(function () {
   $("#button3").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button3").css("border", "3px solid red");
        });
    });
});


$(document).ready(function () {
    $("#button4").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button4").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button5").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button5").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button5").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button5").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button6").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button6").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button7").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button7").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button8").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button8").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button9").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button9").css("border", "3px solid red");
        });
    });
});

当我点击按钮时，背景上仍然有一个灰色阴影。我想要的是当我点击按钮，css动画停止，我可以看到该按钮的背景图像，当我单击另一个按钮，所有按钮都去默认样式（灰色阴影），而只有按钮，我

When I click a button, the background still have a gray shadow on it. What I want is when I click the button, the css animation stops and I can see the background image of that button, and when I click another button, all buttons go to default style ( gray shadow on them ) and only the button that I clicked, show the background without any shadows on it.

推荐答案

这是 DEMO

$(document).ready(function () {
    $("#button1").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button1").css("border", "3px solid red");
            $("#button1").css("backgroundimage", "url (../images/btnbg.png)", "!important");
        });
    });
});

这篇关于删除按钮的阴影，当其活动（点击）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！