Javascript 以编程方式触发悬停css伪类

我需要以编程方式触发hover伪类（如果可能的话，使用冒泡，否则我也将被迫调用对所有元素的更改）。 我无法控制html页面，因此无法将css从：hover更改为.hover，以便将HTMLElement的类更新为.hover

可能吗

请不要用JQUERY。我不能在我的项目中使用JQuery

先谢谢你

更新

我已经为CSS加载创建了一种代理，所以在加载CSS之前，它会传入我的“代理”，将规则从：hover改为.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;
}

var actualHoveredElements=new Array（）；
var hoverAddedCount=0；
var maxHoveredElems=5；
函数changeHover（新元素、旧元素）{
var oldhorveedelements=actualHoveredElements.slice（）；
var remainingElements=sethoverforparentsofements（新元素、旧hoveredelements）；
对于（变量i=0；i-1）{
实际过度删除。拼接（实际索引，1）；
}
nothoverdelement.classList.remove（“hoverclass”）；
}
hoverAddedCount=0；
changeHoverTimeout=null；
}
函数setHoverForParentsOfElement（元素，旧HoveredElements）{
var指数=-1；
if（oldHoveredElements！=“未定义”&&oldHoveredElements.length>0）
index=oldHoveredElements.indexOf（元素）；
如果（索引>-1）{
oldHoveredElements.拼接（索引1）；
}否则{
实际过度删除。推送（元素）；
元素.classList.add（“hoverclass”）；
}
if（element.tagName！=“BODY”&&element.tagName！=“HTML”）{
if（hoverAddedCount

---

如您所见，我也尝试将悬停冒泡次数限制为N，但性能问题仍然存在。

您可以尝试类似的方法，但不建议这样做：

函数触发器CSS（元素、选择器）{
整体：for（var i=0；i
span:悬停{
颜色：红色；
文字装饰：下划线；
}
ABC
否，您不能使用JavaScript直接将元素注册为悬停状态，以便在鼠标不悬停在相关元素上的情况下触发
：hover
CSS

最接近的方法是使用JavaScript查找将在
：hover
过程中应用的CSS规则，然后手动应用这些规则，如中所示（为了后代起见，复制如下）：

//查找所需悬停的所有css属性
var applyHoverStyle=函数（）{
var div=document.getElementsByTagName（“div”）[0]；
变量i，j，sel=/div:hover/，aProperties=[]；
对于（i=0；i
我在SO上查找副本，我找到的都是jQuery的解决方案+1给你。你能发布一些相关的代码吗？那么你想使用onmouseover和onmouseout事件吗？我有一个编程模拟的mouseover和mouseout事件，它也会触发hover。也许这是一个糟糕的主意，即使添加不同的样式表并使用类选择器复制hover样式也更好。将严重影响性能，并且可能会经常调用。。。与其使用
中断
为什么不使用简单的
返回
？@kapa-当然我知道这是一个糟糕的想法，这就是为什么我在回答
不推荐
时说的原因。然而，关键是它完成了任务，这才是最重要的。这并不比按照我在更新问题时所说的方式添加一个类要好。在演讲中看起来甚至是最糟糕的。对不起，这不能回答我的问题（@GiuseppeLanza-是的，如果你能像以前那样修改样式表，那么添加一个类肯定会更好。但是请记住，你一开始并没有说我可以这样做，所以我坚持使用纯JS解决方案。（事实上，你明确地说你不能将css从：hover改为.hover。）不管你认为这是不是回答了你的问题，我会把它留在这里。这是一个很好的解决办法。但是现在我已经做了这个“代理”，所以我将注意力放在表演上。（他们现在不太令人鼓舞。元素的变化是非常沉重的！（UIWebVIEW在iPhone 4S上的表现非常糟糕。）谢谢你。
// 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(' ');
};