更改:使用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

您无法:hover通过Javascript 更改或更改实际选择器.但是,您可以使用mouseenter更改样式,然后重新打开mouseleave(感谢@Bryan).

Answer 3

您可以使用鼠标事件来控制，例如悬停。例如，当您将鼠标悬停在该元素上时，以下代码将变得可见。

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

Answer 4

很老的问题，所以我想我会添加一个更现代的答案。现在 CSS 变量得到了广泛的支持，它们可以用来实现这一点，而无需 JS 事件或!important.

以 OP 为例：

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

我们现在可以在 CSS 中做到这一点：

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

并使用 javascript 添加悬停状态，如下所示：

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

这是一个工作示例https://codepen.io/ybentz/pen/RwPoeqb

Answer 5

很抱歉找到这个页面已经晚了 7 年，但这里有一个更简单的方法来解决这个问题（任意更改悬停样式）：

HTML：

<button id=Button>Button Title</button>

CSS：

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

JavaScript：

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');

Answer 6

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

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

Answer 7

如果它符合您的目的，您可以在不使用 css 和onmouseover在 javascript 中使用事件的情况下添加悬停功能

这是一个代码片段

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

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