Question

我有div，当我鼠标悬停在它上面时，我想要更改背景（可能还有其他属性）。我可以通过调用el.style.backcolor = ""来实现，但有没有办法可以为它添加另一种CSS样式，然后将其删除？与style += mouseOverStyle相同，然后是style -= mouseOverStyle。这样我就可以在CSS中选择要更改的属性，而不是在JavaScript代码中。

编辑：我可能想在其他情况下应用新风格，而不仅仅是鼠标悬停，所以#div：hover实际上不是一般解决方案。我真正要问的是有什么类似style.add（“style”）和style.remove（“style”）？

Answer 1

如果我理解正确，那么当你将div元素悬停时，你要求改变背景？

这很容易通过CSS完成，不需要Javascript或其他代码！

#myDiv
{
   background-color: #f00;
}

#myDiv:hover
{
   background-color: #00f;
}

当然你也可以改变其他风格，你不需要添加另一个类来改变一种或多种风格。

希望有所帮助：）

Answer 2

你可以尝试使用多个：hover伪选择器：

div.style1:hover { background: red }
div.style2:hover { background: yellow }

然后使用javascript / jquery在html类属性之间切换

Answer 3

我建议你使用JS库，比如jQuery。在jQuery中它很简单： http://api.jquery.com/addClass/以及鼠标悬停事件处理http://api.jquery.com/mouseover/。

Answer 4

function changeStyle()
{
   document.getElementById("elementID").style.color="green";
 }

<。>之后的.style。你应该粘贴你想要编辑的css属性。

Answer 5

如果您想使用js，请更改用户事件的属性。

onmouseover : el.style.background = "blue";

onmouseout : el.style.background = "red";

如果你想随着时间的推移添加更多属性，只需将其抛入函数

即可

function onMouseOverFunction () {
   el.style.background = "blue";
   el.style.color = "blue";
   el.style.font-size= "1em";
}

Answer 6

只需在需要时添加或删除CSS类。

添加：

yourElement.className += ' my_class';

卸下：

yourElement.className = yourElement.className.replace(/\bmy_class\b/, '');

使用jQuery，您可以使用addClass，removeClass和toggleClass方法（请参阅docs）。

如何临时添加CSS样式？

6 个答案: