更改：使用JavaScripthoverCSS属性
我需要find一种方法来改变CSS：hover属性使用JavaScript。
例如，假设我有这个HTML代码：
<table> <tr> <td>Hover 1</td> <td>Hover 2</td> </tr> </table> 和下面的CSS代码：
table td:hover { background:#ff0000; }
我想使用JavaScript将<td> hover属性更改为背景：＃00ff00。 知道我可以使用JavaScript访问样式背景属性：
document.getElementsByTagName("td").style.background="#00ff00";
但我不知道一个JavaScript的等价物：hover。 如何更改这些<td>：使用JavaScripthover背景？
非常感谢您的帮助！
伪类如: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);
您不能通过Javascript更改或更改实际的:hoverselect器。 但是，您可以使用mouseenter来更改样式，并在mouseleave上恢复（谢谢，@Bryan）。
你可以做的是改变你的对象的类，并定义两个不同的hover属性的类。 例如：
.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");
如果它适合你的目的，你可以添加hoverfunction，而不使用css，并在JavaScript中使用onmouseover事件
这是一个代码片段
<div id="mydiv">foo</div> <script> document.getElementById("mydiv").onmouseover = function() { this.style.backgroundColor = "blue"; } </script>
我有这个需要一次，并创build了一个小型图书馆，维护CSS文件
https://github.com/terotests/css
有了这个，你可以说
css().bind("TD:hover", { "background" : "00ff00" });
它使用上面提到的技术，并试图处理跨浏览器问题。 如果由于某种原因存在像IE9这样的老式浏览器，它将限制STYLE标签的数量，因为较早的IE浏览器对页面上可用的STYLE标签数量有着奇怪的限制。
而且，它仅通过周期性地更新标签来限制stream量到标签。 对创buildanimation类也有有限的支持。
这实际上并不是将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”。
我build议将所有:hover属性replace为:active当您检测到设备支持触摸时: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'); } } } } } }
声明一个全局variables：
var td
然后select你的guiena猪得到它的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; }
就是这样，你可以使所有的<td>标签获得background-color: #00ff00; 当直接改变它的css属性（CSS类之间的切换）。
