更改:使用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类之间的切换)。