更改:使用JavaScript悬停CSS属性
更改:使用JavaScript悬停CSS属性
提问于 2012-07-07 09:27:00
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。
回答 17
Stack Overflow用户
回答已采纳
发布于 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);Stack Overflow用户
发布于 2012-07-07 09:30:16
您可以通过Javascript can't更改或更改实际的:hover选择器。但是，您可以使用mouseenter更改样式，然后在mouseleave上恢复(谢谢，@Bryan)。
Stack Overflow用户
发布于 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");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11371550
复制相关文章
相似问题
腾讯云开发者
