Triggering Hover css pseudo class programmatically

Question

I need to trigger the hover pseudo class programmatically (if possible with bubbling, or i will be forced to call the change to all elements parents too). I don't have the control of the html page, so i can't change the css from :hover to .hover in order to update the class of the HTMLElement to the .hover one.

Is that possible?

Please NO JQUERY. I can't use JQuery in my project.

Thank you in advance.

UPDATE

i've created a sort of proxy for CSS loading, so now before a css is loaded it passes in my "proxy" that changes the rules from :hover to .hoverclass.

Well, now the hover effects works pretty well, but i have some serious performance issue due to the bubbling simulation of the hover.

Here is some code:

var actualHoveredElements = new Array();
var hoverAddedCount = 0;
var maxHoveredElems = 5;

function changeHover(newElement, oldElement){
    var oldHoveredElements = actualHoveredElements.slice();

    var remainingElements = setHoverForParentsOfElement(newElement, oldHoveredElements);

    for(var i = 0; i < remainingElements.length; i++){
        var notHoveredElement = remainingElements[i];
        var actualIndex = actualHoveredElements.indexOf(notHoveredElement);

        if(actualIndex > -1){
            actualHoveredElements.splice(actualIndex, 1);
        }
        notHoveredElement.classList.remove("hoverclass");
    }

    hoverAddedCount = 0;
    changeHoverTimeout = null;
}


function setHoverForParentsOfElement(element, oldHoveredElements){
    var index = -1;

    if(oldHoveredElements != "undefined" && oldHoveredElements.length > 0)
        index = oldHoveredElements.indexOf(element);

    if(index > -1){
        oldHoveredElements.splice(index, 1);
    } else {
        actualHoveredElements.push(element);
        element.classList.add("hoverclass");
    }

    if(element.tagName != "BODY" && element.tagName != "HTML"){
        if(hoverAddedCount < maxHoveredElems-1){
            hoverAddedCount ++;
            oldHoveredElements = setHoverForParentsOfElement(element.parentNode, oldHoveredElements);
        }
    }

    return oldHoveredElements;
}

As you can see, i've also tried to limit the number of hover bubbling to N, but the performance issue is still existing.

I was looking up duplicates on SO, and all I find are solutions with jQuery... +1 for you. — Derek 朕會功夫
– Derek 朕會功夫, Commented Feb 10, 2014 at 8:32
i have a programmatic simulated mouseover and mouseout events, that should also trigger hover — Giuseppe Lanza
– Giuseppe Lanza, Commented Feb 10, 2014 at 8:35

Woodrow Barlow · Accepted Answer · 2021-03-26 15:34:17Z

No, you cannot use JavaScript to directly make the element register as hovered such that the :hover CSS would trigger without the mouse being over the element in question.

The closest you can get is to use JavaScript to look up the CSS rules that would be applied during a :hover and then manually apply them, as demonstrated in this gist (duplicated below for posterity's sake):

// Find all css properties for the :hover you want
var applyHoverStyle = function() {
  var div = document.getElementsByTagName("div")[0];
  var i,j, sel = /div:hover/, aProperties = [];
  for(i = 0; i < document.styleSheets.length; ++i){
    // console.log(document.styleSheets[i]);
    if(document.styleSheets[i]. cssRules !== null) {
      for(j = 0; j < document.styleSheets[i].cssRules.length; ++j){    
        if(sel.test(document.styleSheets[i].cssRules[j].selectorText)){
          aProperties.push(document.styleSheets[i].cssRules[j].style.cssText);
          // console.log(document.styleSheets[i].cssRules[j].selectorText, document.styleSheets[i].cssRules[j].style.cssText);
        }
      }
    }
  }
  //console.log(aProperties);
  div.style.cssText = aProperties.join(' ');
};

MarLMazo · Accepted Answer · 2021-03-26 14:33:08Z

0

You can try something like this, although this is not recommended:

http://jsfiddle.net/DerekL/N2GK9/

function triggerCSS(ele, selector) {
  whole: for (var i = 0; i < document.styleSheets.length; i++) {
    for (var j = 0; j < document.styleSheets[i].rules.length; j++) {
      if (document.styleSheets[i].rules[j].selectorText == selector) {
        var style = document.styleSheets[i].cssRules[j].style;
        for (var k = 0; k < style.length; k++) {
          ele.style[toCC(style[k])] = style[toCC(style[k])];
        }
        break whole;
      }

    }
  }

  function toCC(input) {
    return input.toLowerCase().replace(/-(.)/g, function(match, group1) {
      return group1.toUpperCase();
    });
  }
}

triggerCSS(document.getElementById("s"), "span:hover");

span:hover {
  color: red;
  text-decoration: underline;
}

<span id="s">ABC</span>

edited Mar 26, 2021 at 14:33

MarLMazo

4241 gold badge5 silver badges19 bronze badges

answered Feb 10, 2014 at 9:13

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

5 Comments

kapa Over a year ago

This is a terrible idea, even adding a different stylesheet and duplicating the hover styles with a class selector is better. Will hurt performance pretty much, and might be invoked pretty often... Instead of that break why not use a simple return?

Derek 朕會功夫 Over a year ago

@kapa - Of course I know this is a terrible idea, that's why I stated in the answer not recommended. However, the point is that it gets the job done, that's all it matter.

Giuseppe Lanza Over a year ago

This is not better than adding a class in the way i said in the update of my question. Looks like even worst in performance speaking. I'm sorry, but this does not answer my question. :(

Derek 朕會功夫 Over a year ago

@GiuseppeLanza - Yes, if you can modify the stylesheet like what you did, then adding a class is definitely better. But remember, you didn't say I can do that in the first place so I've stick to a pure JS solution. (In fact, you explicitly said you cannot change the css from :hover to .hover .) Whether you consider this answered your question or not, I will just leave it here.

Giuseppe Lanza Over a year ago

And it is a fine solution. But now i've done this "proxy" so i'm focusing on performances. :( they are not encouraging at the moment. the changing of the class of an element is damn heavy! (UIWebView performances on iPhone 4s are very bad.) Thank you anyway

Collectives™ on Stack Overflow

Triggering Hover css pseudo class programmatically

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related