如何从样式表中删除：hover CSS规则

Question

I am working on a project based on jQuery and javascript. I am trying to add the CSS rules using javascript insert/addRule properties. What I want to do is :

I have to create hover effect and insert them into the stylesheet using javascript css properties. For this I am creating two classes for example:

.dummy {.... }

and

.dummy:hover{.....}

I want that If I change the hover effect then it must delete the previous one (or duplicates ) from the stylesheet and insert the new rules to the stylesheet.

But the problem is that If I try to remove or delete the CSS rules using deleteRule or removeRule it removes only

.dummy{...} rule but not the .dummy:hover{...}

Here is my code that can help you to understand what I am doing:

function createNewStyle() {
    var style = document.createElement("style");
    style.setAttribute('id', 'd-set-stylesheet');
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
} // this function might be not required but included here so that you may understand the program flow.

//the main issue is with this function.
function removeIfExists(class_name) {
    var styleTag = document.getElementById("d-set-stylesheet");
    var styleRef = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
    if (styleRef.rules) { //all browsers except IE 9-
        console.log(styleRef);
        for (var i in styleRef.cssRules) {
            if (styleRef.cssRules[i].selectorText === "." + class_name+":hover" ||styleRef.cssRules[i].selectorText === "." + class_name )
                styleRef.deleteRule(i);
        }
    } else {
        var i;
        for (i = 0; i < styleRef.rules.length; i++) {
            //if(styleRef.rules[i].selectorText === "."+class_name || styleRef.rules[i].selectorText === "."+class_name+":hover")
            styleRef.removeRule(i);
        }
    }
    return styleRef;
}

 //this function maybe not related with the issue but if it is you can check it.
function setNewClass(element, class_name, classSelector, styleObject) {
    var stylesheet = removeIfExists(class_name);
    if (element.data('hover-class') == null)
        element.data('hover-class', class_name);
    let count = 0;
    var style = [];
    var property = [{
        "append": ":hover"
    }, {
        "append": ""
    }];
    for (j = 0; j < 2; j++) {
        style.push({});
        style[j].sheet = stylesheet;
        style[j].selector = class_name;
        style[j].type = classSelector;
        style[j].property = property[j]["append"];
        style[j].style = "";
    }
    for (i in styleObject) {
        if (styleObject.hasOwnProperty(i))
            if (count % 2 == 0)
                style[0].style += styleObject[i] + ":";
            else
                style[0].style += styleObject[i] + ";";
        count++;
    }
    style[1].style = "transition:" + styleObject.t_property_value;
    addCSSRule(style);
}

function addCSSRule(styleSheet) {
    console.log(styleSheet);
    for (i = 0; i < styleSheet.length; i++)
        if (styleSheet[i].sheet.insertRule)
            styleSheet[i].sheet.insertRule(styleSheet[i].type + styleSheet[i].selector + styleSheet[i].property + "{" + styleSheet[i].style + "}", styleSheet[i].sheet.cssRules.length);
        else
            styleSheet[i].sheet.addRule(styleSheet[i].type + styleSheet[i].selector + styleSheet[i].property, styleSheet[i].sheet.style, -1);
}

Here are the images that of console.log In the first image the hover and without hover class is added to CSS rules.

In the second image the previous hover class is not deleted while without hover class is deleted. I want hover transition must be deleted. Before adding new Rules to prevent duplication of classes and more than one transition on hovering the element should be prevented.

Thank you.

Answer 1

I found the answer today. I will explain it so that it can help others in future to understand the problem and solution.

As through my question, you can understand the issue. The problem was with this function only

function removeIfExists(class_name) {
 ......
if (styleRef.rules) { //all browsers except IE 9-
    for (var i in styleRef.cssRules) {
           .....
            styleRef.deleteRule(i); //problem is with this.
           .....
    }
   }
  .......
   return styleRef;
}

When I check the deleteRule on the basis of some test I found that when the deleteRule is called following things happens:

1. The css rule is deleted on the basis of index.
2. (The most important, as there is no documentation or clarification or explanation about this) The content get updated with their indexing. So that my function will no longer be able to delete the correct rules on the basis of old indexing.

To understand it better I will give you an example:

Suppose, I have added two rules in css such as: .dummy:hover{...} and .dummy{...}

Now the indexing of these rules will be as follows:

[0]: .dummy:hover rule
[1]: .dummy rule

When i call the delete rule what happen is :

// at i =0; 
deleteRule(0);/* will be called and it will remove [0]: .dummy:hover rule
 and then it will update the rules indexing again, which means
 [1]: .dummy rule => [0]: .dummy rule */
// now when i = 1;
deleteRule(1); /* will be called and it will try to remove [1]: .dummy rule which is not here anymore and it will just skip the removal of [1]: .dummy rule.

So what I do to remove it is starting to remove the rule from highest indexing or in reverse order which means the i = 1 rule will be deleted first then i=0; rule so that there would not be any consequences.

and the function would changed as this:

function removeIfExists(class_name)
{
    ...
    var styleRef = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
    var len = styleRef.cssRules ? styleRef.cssRules.length : styleRef.rules.length;
    if(styleRef.rules){ //all browsers except IE 9-
        for(i=len;i>0;i--)
        {
                if (styleRef.cssRules[i-1].selectorText === "." + class_name+":hover" ||styleRef.cssRules[i-1].selectorText === "." + class_name )
                styleRef.deleteRule(i-1);
        }
    }
    ......
    .....
    }
    return styleRef;    
}

Note : The similar procedure would be followed for IE but I have not included it here.