Cigger hover css class alias

Question

I need to run the hover pseudo-class programmatically (if possible, with bubbles, or I will be forced to cause a change for all elements of the parents too). I have no control over the html page, so I can not change css from: hover to .hover in order to upgrade the HTMLElement class to .hover.

Is it possible?

Please, NO HEALTH. I can not use jQuery in my project.

Thanks in advance.

UPDATE

I created a proxy server for loading CSS, so before downloading css it goes to my "proxy", which changes the rules: from hover to .hoverclass.

Well, now the freeze effects work very well, but I have a serious performance issue due to the bubbling freeze simulation.

Here is the 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 also tried to limit the number of freezes imposed on N, but the performance issue still exists.

Answer 1

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

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

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

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

 triggerCSS(document.getElementById("s"), "span:hover"); 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(); }); } }