使用JavaScript更改：hover CSS属性

我需要找到一种使用JavaScript更改CSS：hover属性的方法。

例如，假设我有以下HTML代码：

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

以及以下CSS代码：

table td:hover {
background:#ff0000;
}

我想使用JavaScript将<td>悬停属性更改为例如background：＃00ff00。知道我可以使用JavaScript通过以下方式访问样式背景属性：

document.getElementsByTagName("td").style.background="#00ff00";

但是我不知道：hover的JavaScript等效项。如何使用JavaScript更改这些<td>的：hover背景？

非常感谢您的帮助！

伪类:hover从不引用元素，而是引用任何满足样式表规则条件的元素。您需要编辑样式表规则，追加新规则或添加包含新:hover规则的新样式表。

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

您无法:hover通过Javascript更改或更改实际的选择器。但是，您可以使用mouseenter来更改样式，然后重新启用mouseleave（感谢@Bryan）。

您可以做的是更改对象的类，并定义两个具有不同悬停属性的类。例如：

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

我发现了这一点： 使用JavaScript更改元素的类

function changeClass(object,oldClass,newClass)
{
    // remove:
    //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
    // replace:
    var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
    object.className = object.className.replace( regExp , newClass );
    // add
    //object.className += " "+newClass;
}

changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");

如果适合您的目的，则可以添加悬停功能，而无需使用CSS和onmouseoverjavascript中的事件

这是一个代码片段

<div id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>

很抱歉，找到此页面已经晚了7年，但这是解决此问题的一种简单得多的方法（任意更改悬停样式）：

HTML：

<button id=Button>Button Title</button>

CSS：

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

JavaScript：

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');

很老的问题，所以我想我将添加一个更现代的答案。现在CSS变量得到了广泛的支持，不需要JS事件或!important。

以OP为例：

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

我们现在可以在CSS中执行此操作：

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

并使用javascript添加悬停状态，如下所示：

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

这是一个工作示例https://codepen.io/ybentz/pen/RwPoeqb

建议您在检测到设备支持触摸时将所有:hover属性替换为:active。只需在执行此操作时调用此函数即可touch()

   function touch() {
      if ('ontouchstart' in document.documentElement) {
        for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
          var sheet = document.styleSheets[sheetI];
          if (sheet.cssRules) {
            for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
              var rule = sheet.cssRules[ruleI];

              if (rule.selectorText) {
                rule.selectorText = rule.selectorText.replace(':hover', ':active');
              }
            }
          }
        }
      }
    }

我曾经有过这种需求，并为此创建了一个小型库，用于维护CSS文档

https://github.com/terotests/css

这样你就可以说

css().bind("TD:hover", {
        "background" : "00ff00"
    });

它使用了上面提到的技术，并尝试解决跨浏览器的问题。如果由于某种原因存在像IE9这样的旧浏览器，它将限制STYLE标签的数量，因为较旧的IE浏览器对页面上可用的STYLE标签的数量具有这种奇怪的限制。

此外，它通过仅定期更新标签来限制对标签的访问量。创建动画类的支持也有限。

声明一个全局变量：

var td

然后选择您guiena猪<td>由其得到它id，如果你想改变所有这些，然后

window.onload = function () {
  td = document.getElementsByTagName("td"); 
}

使函数被触发并循环更改所有所需td的

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

转到您的CSS工作表：

.yournewclass:hover { background-color: #00ff00; }

就是这样，您可以通过直接更改其CSS适当性（在CSS类之间切换）来使所有<td>标记background-color: #00ff00;悬停时得到一个标记。

这实际上不是将CSS添加到单元格中，但是效果相同。尽管提供与上述其他结果相同的结果，但此版本对我来说更直观一些，但我是新手，因此，请考虑以下内容：

$(".hoverCell").bind('mouseover', function() {
    var old_color = $(this).css("background-color");
    $(this)[0].style.backgroundColor = '#ffff00';

    $(".hoverCell").bind('mouseout', function () {
        $(this)[0].style.backgroundColor = old_color;
    });
});

这需要将要突出显示的每个单元格的类设置为“ hoverCell”。

您可以创建一个CSS变量，然后在JS中对其进行更改。

:root {
  --variableName: (variableValue);
}

要在JS中进行更改，我做了以下方便的小功能：

var cssVarGet = function(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

和

var cssVarSet = function(name, val) {
  document.documentElement.style.setProperty(name, val);
};

您可以根据需要创建任意多个CSS变量，但我在函数中未发现任何错误；之后，您所要做的就是将其嵌入到CSS中：

table td:hover {
  background: var(--variableName);
}

然后是bam，这是一个仅需要一些CSS和2个JS函数的解决方案！

您可以使用鼠标事件进行悬停控制。例如，当您将鼠标悬停在该元素上时，以下代码将变为可见。

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

如果您使用轻量级html ux lang，请在此处查看示例，编写：

div root
 .onmouseover = ev => {root.style.backgroundColor='red'}
 .onmouseleave = ev => {root.style.backgroundColor='initial'}

上面的代码执行css：hover元标记。