使用 javascript 更改背景颜色会影响 CSS 的 ：hover

Question

我有一组6个div，当我单击它们时，某个div会更改其innerHTML，就像某种菜单一样。当用户将鼠标悬停在这些"按钮"（实际上是div）上时，它们会用CSS的属性:hover高亮显示。还有:active，当用户点击"按钮"时。

由于"信息"div在单击时会发生变化，我希望当前选定的div始终高亮显示，颜色与悬停时完全不同。所以我使用了javascript。我调用了一个函数，该函数会更改所有"按钮"的背景颜色（这样我就不必"记住"单击了哪个按钮），然后将thisdiv的backgroundColor更改为适当的颜色。

然而，现在我失去了我的:hover和:active风格。如何处理？

以下是要求的代码片段：

function ofarbajSveU999() {
document.getElementById("menubutton1").style.backgroundColor = "#999";
...
document.getElementById("menubutton6").style.backgroundColor = "#999";
}
function showMeaning() {
document.getElementById("information").innerHTML = meaning;
ofarbajSveU999();
document.getElementById("menubutton1").style.backgroundColor = "#ccc";
}

meaning是一个字符串，menubuttonX是6个类似按钮的div。

#kotd .menubutton {
float: left;
background-color: #999;
width: 120px;
padding: 2px 0px;
cursor: pointer;
}
#kotd .menubutton:hover {
background-color: #aaa;
}
#kotd .menubutton:active {
background-color: #bbb;
}

Answer 1

不要使用javascript更改颜色，而是使用javascript向活动的"按钮"添加和删除一个类（例如.current），然后在CSS中相应地设置.current类的样式。jQuery将是使用addClass()、removeClass()或toggleClass()函数实现这一点的最优雅的解决方案。

为了进一步解释这个想法：

单击按钮时，将类添加到其类属性中，而不是添加内联样式属性。这允许通过CSS样式表对它们进行样式设置。

在jQuery中，这真的很容易。你可以这样做：

$(".menubutton").click(function () {
    $(".menubutton").removeClass("current");
    $(this).addClass("current");
});

循序渐进：

首先通过调用$(".menubutton")来查找类为menubutton的所有DOM元素。然后，通过使用.click()，如果单击了menubutton元素之一，则会触发一个事件。function(){}包括单击时执行的功能。第一个

$(".menubutton").removeClass("current");

再次获取具有类menubutton的所有对象，并从任何具有该类的对象中删除该类current

$(this).addClass("current");

将类current添加到"this"。。。意思是点击的对象。

这将使DOM中单击的对象看起来像这样：

<div class="menubutton current">

在CSS中，您现在可以为具有附加current类的对象设置样式：

.currnet {
    background-color:blue;
    color:white;
}

演示

在纯JavaScript中，这将更加棘手。也许这个线程可以让你对有更多的了解

如何在JavaScript中添加/删除类？

Answer 2

您应该广泛使用jquery的.heverver（）函数。

结账http://api.jquery.com/hover/&http://api.jquery.com/click/

样品和你可以很容易地做到这一点。

确切地说，您应该使用以下两个内置功能：

$(selector).hover(handlerIn, handlerOut);
$(selector).click(event);

干杯