以編程方式觸發懸停css僞類

Question

我需要以編程方式觸發懸停僞類（如果可能，冒泡，否則我將被迫更改爲所有元素的父母）。 我沒有html頁面的控制權，所以我無法更改css：將鼠標懸停在.hover上，以便將HTMLElement的類更新爲.hover。

這可能嗎？

請不要JQUERY。我無法在我的項目中使用JQuery。

預先感謝您。

UPDATE

我已經創建了一種代理的CSS加載的，所以現在的CSS加載之前，它通過在改變從我的規則「代理」：懸停.hoverclass。

那麼，現在懸停效果工作得很好，但由於懸停的冒泡模擬，我有一些嚴重的性能問題。

下面是一些代碼：

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; 
} 

正如你所看到的，我也試圖限制懸停冒泡到N的數量，但性能問題仍然存在。

Answer 1

你可以嘗試這樣的事情，雖然不建議這樣做：

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