jqueryでボックスシャドウの色のみを変更する方法

Question

ボタンの背景色をより暗くするために、ボタンの背景色を動的に変更できるように、いくつかのJSコードがあります。

私のコードは機能しますが、ホバーで変更するには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でそれをやり直す必要がない好むだろう。

ボックスシャドウプロパティを文字列に変換し、その色部分のみを変更するのはどうでしょうか？

Answer 1

はい、すべてのCSSを入力[type = submit]から入力[type = submit]：hoverに変更します。代わりに、必要な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; 
}