如何只用jquery改变框阴影的颜色

How to change only the color of box-shadow with jquery

本文关键字：阴影 颜色 改变 jquery      更新时间：2023-09-26

我有一些JS代码使按钮的box-shadow为按钮背景色的深色版本，用户可以动态更改按钮背景色。

我的代码工作，但我也需要box-shadow值改变悬停和我的代码是改变整个属性，而不仅仅是阴影的颜色。

$("input[type=submit]").each(function() {
    //get button color
    var btnclr = $(this).css("background-color");
    //make darker
    $(this).css({
        "box-shadow": "0 -3px 7px " + LightenDarkenColor(rgb2hex(btnclr), -80) + " inset"
    });
});

input[type=submit] {
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #555753;
    background-color: cor11;
    font-weight: normal;
    text-transform: uppercase;
    box-shadow: 0 -3px 7px #888a85 inset;
}
input[type=submit]:hover {
    box-shadow: 0px 3px 7px #888a85 inset;
    text-shadow: 0 0;
}

我知道我可以在JS中制作悬停动画，但CSS更轻，我宁愿不用在JS中重做。

也许把box shadow属性变成一个字符串，只改变它的颜色部分怎么样?

是的，它会改变所有的css从input[type=submit]到input[type=submit]:hover，而不是使用所有需要的css与hover。

input[type=submit] {
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #555753;
    background-color: cor11;
    font-weight: normal;
    text-transform: uppercase;
    box-shadow: 0 -3px 7px #888a85 inset;
}
input[type=submit]:hover {
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #555753;
    background-color: cor11;
    font-weight: normal;
    text-transform: uppercase;
    box-shadow: 0px 3px 7px #888a85 inset;
    text-shadow: 0 0;
}
相关文章：