如何用jquery只改變盒子的陰影顏色

我有一些JS代碼可以使按鈕的box-shadow成爲按鈕背景顏色的較暗版本，用戶可以在其中動態地改變按鈕的背景顏色。如何用jquery只改變盒子的陰影顏色

我的代碼有效，但我也需要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陰影屬性轉換爲字符串並只更改它的顏色部分？

來源

2016-09-13 Suzanne Edelman Creoconcept

首先你的背景顏色代碼不對。你也想在懸停時改變你的盒子陰影，但你沒有改變你的顏色懸停你使用相同的顏色它將如何工作？ –

就是這樣，我不想改變懸停時的顏色，只是陰影位置。比較「box-shadow：0 -3px 7px＃888a85 inset」to「box-shadow：0px 3px 7px＃888a85 inset」 –

是的，它會改變從輸入[type = submit]到輸入[type = submit]的所有css：懸停，而是在懸停時再次使用所有需要的css。

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

來源

2016-09-13 11:42:50 Sathish

我的問題是JS將「box-shadow：0 -3px 7px」改爲「box-shadow： 0px 3px 7px「。看到按鈕的背景是JS變暗的變量，所以箱形陰影總是看起來不錯。 –

如何用jquery只改變盒子的陰影顏色

回答

相關問題