javascript - Triggering Hover css pseudo class programmatically - Stack Overflow

admin管理员组

文章数量:1304921

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 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.

• javascript
• css

Share Improve this question Follow edited Feb 10, 2014 at 9:00 Giuseppe Lanza asked Feb 10, 2014 at 8:28 Giuseppe LanzaGiuseppe Lanza 3,69922 gold badges2020 silver badges4141 bronze badges 17

• I was looking up duplicates on SO, and all I find are solutions with jQuery... +1 for you. – Derek 朕會功夫 Commented Feb 10, 2014 at 8:32
• could you post some relevant code? – anurupr Commented Feb 10, 2014 at 8:33
• so you want to use onmouseover with onmouseout event ? – Sora Commented Feb 10, 2014 at 8:34
• i have a programmatic simulated mouseover and mouseout events, that should also trigger hover – Giuseppe Lanza Commented Feb 10, 2014 at 8:35
• Perhaps stackoverflow./questions/2490825/… – Oleg Commented Feb 10, 2014 at 8:35

 |  Show 12 more ments

2 Answers 2

Sorted by: Reset to default 5

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

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

http://jsfiddle/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>

本文标签： javascriptTriggering Hover css pseudo class programmaticallyStack Overflow