Question

我需要以编程方式触发悬停伪类（如果可能的话冒泡，或者我也将被迫调用所有元素父变换）。我没有对html页面的控制，所以我无法更改css：hover to .hover以便将HTMLElement的类更新为.hover。

这可能吗？

请不要发表评论。我不能在我的项目中使用JQuery。

提前谢谢。

更新

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

不，您不能使用 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(' ');
};

Answer 2

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

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

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

2 个答案: