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 朕會功夫, Feb 10 '14 at 08:32
i have a programmatic simulated mouseover and mouseout events, that should also trigger hover — Giuseppe Lanza, Feb 10 '14 at 08:35
Perhaps http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript — Oleg, Feb 10 '14 at 08:35
possible duplicate of [Trigger css hover with JS](http://stackoverflow.com/questions/4347116/trigger-css-hover-with-js) — kapa, Feb 10 '14 at 08:36
Oleg. as i said i don't have control of the html page, and calling the events does not trigger the hover. in fact i need to trigger the hover after a mouseover simulated event on that element. — Giuseppe Lanza, Feb 10 '14 at 08:37
@kapa - If you look into the answers, there is none that satisfy OP's requirement. — Derek 朕會功夫, Feb 10 '14 at 08:37
@GiuseppeLanza - It seems like that the browser will not trigger `:hover` state upon `mouseover`: http://jsfiddle.net/DerekL/N2GK9/ — Derek 朕會功夫, Feb 10 '14 at 08:37
@kapa it is a query answer that adds a class. i don't have css control. i can't change :hover with .hover — Giuseppe Lanza, Feb 10 '14 at 08:38
@Derek朕會功夫 The answers state that it is not possible without changing the CSS (and adding a class for example). You cannot trigger the CSS `:hover` from Javascript, and it makes no difference whether you use jQuery or Javascript. — kapa, Feb 10 '14 at 08:38
@GiuseppeLanza See [brendan's answer](http://stackoverflow.com/a/4347244/468793). — kapa, Feb 10 '14 at 08:40
@kapa Do you think it is possible to emulate a `touch` event on the element to trick the browser to trigger `:hover`? It probably won't work, but it's worth a try. — Derek 朕會功夫, Feb 10 '14 at 08:41
@kapa if you use any html debugger just like the chrome one, you can see that there is a "set state" functionality, that allows me to think that it is possible... — Giuseppe Lanza, Feb 10 '14 at 08:41
@GiuseppeLanza - One idea I have, since it is "impossible" to trigger `hover` state in JS, why don't you grab the CSS rules for `:hover` and apply to the element manually by JS? — Derek 朕會功夫, Feb 10 '14 at 08:44
@Derek 朕會功夫 Done. some performance issue on adding and removing a class to an Element bubbling. — Giuseppe Lanza, Feb 10 '14 at 08:45

score 4 · Answer 1 · answered Mar 26 '21 at 15:34

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(' ');
};

score 0 · Answer 2 · edited Mar 26 '21 at 14:33

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 '21 at 14:33

MarLMazo

424
1
5
18

answered Feb 10 '14 at 09:13

Derek 朕會功夫

92,235
44
185
247

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`? – kapa Feb 10 '14 at 09:24
@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. – Derek 朕會功夫 Feb 10 '14 at 09:43
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. :( – Giuseppe Lanza Feb 10 '14 at 09:54
@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. – Derek 朕會功夫 Feb 10 '14 at 10:12
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 – Giuseppe Lanza Feb 10 '14 at 10:23

Triggering Hover css pseudo class programmatically

2 Answers2