無法使用選色器更改css a：hover上的顏色？

Question

 ul li { width: auto; display: inline; } #demo { text-align:right; font-size:20px; color:black; background-color:none; margin:2px; } .buttonnt1 { background-color: #3CAF50; border: none; color: white; padding: 10px 22px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } ul { list-style-type: none; margin: 0; padding: 0; display: inline-block; background-color: #333; position: -webkit-sticky; position: sticky; top: 0; } li { float: left; } ul > li:last-child ul{ right: 4px; left: auto; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .colorhover a:hover { background-color: var(--c,#4CAF50); } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .active { background-color: #4CAF50; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="English"><a class="active" href="#home">Home</a></li> <li id="Svenska" class="dropdown"> </li> <li id="English" class="dropdown"> <a href="javascript:void(0)" class="dropbtn colorhover" ondblclick="getElementById('demo').innerHTML = Date()" onclick="myFunction()">What is the time</a> <div class="dropdown-content"> <a href="#">Double click to show what time it is</a> </div> </li> <li id="English" class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Support</a> <div class="dropdown-content"> <a href="http://www.404.com">Contact</a> <a href="#">Location</a> </div> </li> 

我無法使用顏色選擇器http://www.eyecon.ro/colorpicker/在a:hover {background-color:#333;}上更改顏色。 如何使用顏色選擇器在：hover上更改顏色。 如果我只是用a它改變<a> 。 如果我創建一個類， .colorhover a:hover {background-color:#333;} a：hover根本不起作用。

a.colorhover:hover不起作用。

我如何使其與a：hover一起使用。

$('#colorpickerHolder').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
    $(colpkr).fadeIn(500);
    return false;
},
onHide: function (colpkr) {
    $(colpkr).fadeOut(500);
    return false;
},
onChange: function (hsb, hex, rgb) {
   $('a:hover').css("background", "#" + hex);
}

Answer 1

看來您正在嘗試使用jQuery“選擇” CSS樣式。 jQuery有自己的選擇器，許多選擇器確實與CSS重疊，但是它們並不相同。

在這里您可以看到:hover不是有效的jQuery選擇器： https : //api.jquery.com/category/selectors/

這是有效的CSS偽類 。

您可以使用jQuery的hover定義所需的行為，該hover具有handlerIn和handlerOut回調。

您尚未為代碼提供標記（和CSS？），所以我沒有適合您的示例。 您可以使用顯示到目前為止的工作代碼的片段來編輯您的帖子。 （請參閱： 如何創建最小，完整和可驗證的示例 ）

Answer 2

我會考慮CSS變量：

 onChange: function(hsb, hex, rgb) { $('.colorhover').css("--c", "#" + hex); } 

 .colorhover a:hover { background-color: var(--c,#333); }