JS adds property to "element" in CSS tree, overrides :hover setting

HTML & CSS
2

OK, the issue is partly solved, in that I have a good example of how the removeProperty() function works.


<!DOCTYPE html>
<html>
<head>
    <style>
        #p1 {
            color: blue;
        }
        #p1:hover {
            color: green;
        }
    </style>
</head>
<body>
    <h1>JS and :hover</h1>
    <p id="p1">This text starts out blue and :hover makes it green.</p>
    <button type="button" onclick="buttonFunction()">Click me turns text to red.</button>
    <p>After clicking the button, hover no longer works. What can be done via JS to restore the :hover functionality?</p>
    <button type="button" onclick="restoreHover()">Attempt to restore :hover</button>
    <script>
        function buttonFunction() {
            var el = document.getElementById("p1");
            el.style.color = "red";
        }
        function restoreHover() {
            var el = document.getElementById("p1");
            el.style.removeProperty("color"); 
        }
    </script>
</body>
</html>

With the DevTools showing the CSS for the element , it’s possible to observe how the removeProperty() only effects the top (inline) element tag on the CSS chain of command.

In my pseudo “hover” for touch controls, I should be able to handle this by having the start of the mouse move remove the inline opacity setting by using the removeProperty() method.