JavaScript如何更改CSS :hover
属性?
例如:
HTML
<table>
<tr>
<td>Hover 1</td>
<td>Hover 2</td>
</tr>
</table>
CSS
table td:hover {
background:#ff0000;
}
如何使用JavaScript将td :hover
属性修改为background:#00ff00
?我知道我可以使用JavaScript访问style background属性:
document.getElementsByTagName("td").style.background="#00ff00";
但我不知道有什么.style
JavaScript等同于:hover
。
发布于 2012-07-07 09:37:49
像: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);
发布于 2012-07-07 09:30:16
您可以通过Javascript can't更改或更改实际的:hover
选择器。但是,您可以使用mouseenter
更改样式,然后在mouseleave
上恢复(谢谢,@Bryan)。
发布于 2013-05-18 23:42:55
您可以做的是更改对象的类,并定义两个具有不同悬停属性的类。例如:
.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");
https://stackoverflow.com/questions/11371550
复制相似问题