javascript - 以编程方式触发 Hover css 伪类

Question

我需要以编程方式触发悬停伪类(如果可能的话冒泡，否则我也将被迫调用对所有元素父元素的更改)。我没有 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;
}

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

Answer 1

不，您不能使用 JavaScript 直接使元素注册为悬停状态，这样 :hover CSS 将在鼠标未悬停在相关元素上时触发。

最接近的方法是使用 JavaScript 查找将在 :hover 期间应用的 CSS 规则，然后手动应用它们，如 this gist 中所示。 (为了后代的缘故在下面复制):

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