如何使用jquery仅更改box-shadow的颜色

时间:2016-09-13 11:31:50

标签: javascript jquery css css3

我有一些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属性转换为字符串并仅更改它的颜色部分呢?

1 个答案:

答案 0 :(得分:0)

是的,它会将所有css从输入[type = submit]更改为输入[type = submit]:悬停,而是使用悬停时再次使用所有需要的CSS。

void MainWindow::checkPort(int portmin, int portmax, string ip) {
int dif = portmax - portmin;
if (dif <= 0)
    return;

unsigned int open = 0;
unsigned int closed = 0;
int checked = 0;

sockaddr_in addr;
addr.sin_family = AF_INET;
addr.sin_addr.s_addr = inet_addr(ip.c_str());

for (int i = portmin; i <= portmax; i++) {
    int s = socket(AF_INET, SOCK_STREAM, 0);
    addr.sin_port = htons(i);

    int con = ::connect(s, reinterpret_cast<sockaddr*>(&addr), sizeof(sockaddr));

    if (con == 0){
        ui->textEdit->setTextColor(Qt::green);
        ui->textEdit->append("Port " + QString::number(i) + " open.");
        open++;
    }

    if (con == -1) {
        ui->textEdit->setTextColor(Qt::red);
        ui->textEdit->append("Port " + QString::number(i) + " closed.");
        closed++;
    }

    ::close(con);
    ::close(s);
    checked++;
}