CSS :hover 选择器在动态更改后不起作用答案

【问题标题】：CSS :hover selector doesn't work after dynamic changesCSS :hover 选择器在动态更改后不起作用
【发布时间】：2020-10-18 14:12:35
【问题描述】：

我正在制作一个更改元素背景颜色的 chrome 扩展，但在更改之后 :hover 选择器不再起作用。 我看到了this question，但就我而言，我无法将 CSS 规则更改为 !important

是否可以在不使用 override:hover 规则的情况下以编程方式更改元素样式？

例如：

var div = document.querySelector("div");
div.onclick= function(){
   div.style.background="red";
   //after doing that the hover is not working anymore
}

div{
    height:100px;
    width:100px;
    background:green;
    
}
div:hover{

    background:blue;
    
}

&lt;div&gt;

我希望背景为红色，但:hover 上仍为蓝色。

【问题讨论】：

是的，你可以使用 js（鼠标悬停 + element.style.background）
谢谢，但我不知道运行前的 :hover 规则。是否有可能获得 :hover 运行规则？
悬停规则是什么意思？
:hover{} 选择器内的规则

标签： javascript html css

【解决方案1】：

我们可以像下面这样使用javascript鼠标悬停和鼠标移出

$("#id").mousehover

$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "red");
  })
  $("p").mouseout(function(){
    $("p").css("background-color", "");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<p> Change Background </p>

【讨论】：

谢谢，但我不知道运行前的 :hover 规则。是否有可能获得 :hover 运行规则？

【解决方案2】：

如果您不能使用!important，您可以通过document.styleSheets 获取:hover 样式并将它们与Javascript 事件一起使用：

function getElementHoverCssText(element){
    var elementHoverCssText = "";
    var docstyle = document.styleSheets;
    var eltagregex= new RegExp(""+element.tagName+":hover","gi");
    var idregex= new RegExp("#"+element.id+":hover","gi");
    for(i = 0; i < docstyle.length; ++i){
        for(j = 0; j < docstyle[i].cssRules.length; ++j){    
            
            if(eltagregex.test(docstyle[i].cssRules[j].selectorText)){
                elementHoverCssText+=docstyle[i].cssRules[j].style.cssText;
            }
            
            element.classList.forEach(classn =>function(){
                if((new RegExp("."+classn+":hover","gi")).test(docstyle[i].cssRules[j].selectorText)){
                    elementHoverCssText+=docstyle[i].cssRules[j].style.cssText;
                }
            });
            if(idregex.test(docstyle[i].cssRules[j].selectorText)){
                elementHoverCssText+=docstyle[i].cssRules[j].style.cssText;
            }
        }
    }
    return elementHoverCssText;

}




var originalCSSText = element.style.cssText;

function changeColor(el){
  
  //el.style.backgroundColor="red"; uncomment for make the button red immediately after click
  el.innerHTML="mouse out to see color change."
  originalCSSText+="background-color: red;"; 
  
}
element.addEventListener("mouseover",function(){
    originalCSSText=element.style.cssText; 
    element.style.cssText+=getElementHoverCssText(element);
});
element.addEventListener("mouseout",function(){
    element.style.cssText=originalCSSText;   
});

#element{
  height:100px;
  width:200px;
  background-color:green;
}


#element:hover{
  background-color:blue;
}

    &lt;div id="element" onclick="changeColor(this)"&gt;click to change color to red and still have hover&lt;/div&gt;

【讨论】：