CSS :hover selector doesn't work after dynamic changes

user_9977151 0
Viewed 576

I am making a chrome extension that changes element background color, but after changing the:hover selector doesn't work anymore. I saw this question but in my case, I can't change the CSS rule to !important

is it possible to programmatically change element style without override:hover rules?

For example:

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

I want the background to be red but to still have the blue on :hover.

css html javascript
2 Answers

We can use javascript mouse hover and mouse out like below

$("#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>

user_59286770

If you can't use !important you can get the :hover styles via document.styleSheets and use them with Javascript events:

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;
}
    <div id="element" onclick="changeColor(this)">click to change color to red and still have hover</div>

user_99771510
Related