更改：使用JavaScript悬停CSS属性

Question

我需要找到一种方法来改变CSS：使用JavaScript的悬停属性。

例如，假设我有这个HTML代码：

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

以下CSS代码：

table td:hover {
background:#ff0000;
}

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

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

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

非常感谢您的帮助！

Answer 1

像: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);

Answer 2

你can't通过Javascript更改或改变实际的:hover选择器。但是，你可以使用mouseenter来改变风格，然后回到mouseleave（谢谢，@ Bryan）。

Answer 3

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

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

我发现了这个：Change an element's class with 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");

Answer 4

如果它符合您的目的，您可以添加悬停功能，而无需使用CSS并在javascript中使用onmouseover事件

这是一段代码片段

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

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

Answer 5

我有这个需要一次，并创建了一个小型库，用于维护CSS文档

https://github.com/terotests/css

你可以说

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

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

此外，它还通过定期更新标记来限制标记的流量。创建动画类的支持也很有限。

Answer 6

声明的全局变量：

var td

然后选择你的豚鼠qazxsw poi通过它的qazxsw poi获得它，如果你想改变所有它们然后

<td>

创建一个触发函数和一个循环来改变你所需的所有id

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

转到CSS表：

td

就是这样，你可以通过直接改变它的css适当性（在css类之间切换）使你所有的

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

标签得到一个.yournewclass:hover { background-color: #00ff00; } 。

Answer 7

这实际上并不是将CSS添加到单元格中，而是产生相同的效果。虽然提供与上面其他相同的结果，但这个版本对我来说更直观一点，但我是新手，所以请把它当作值得的：

<td>

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

Answer 8

当你检测到设备支持触摸时，我建议将所有background-color: #00ff00;属性替换为

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

。当你这样做:hover时，只需调用此函数

:active