使用 javascript 更改 backgroundColor 会影响 CSS 的 :hover

Question

我有 6 个 div，当我点击每个 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活动“按钮”添加和删​​除类（例如），然后.current在 CSS 中相应地设置类的样式。jQuery 将是使用addClass(),removeClass()或toggleClass()函数来做到这一点的最优雅的解决方案。

进一步解释这个想法：

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

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

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

一步步：

您首先menubutton通过调用.class 查找所有 DOM 元素$(".menubutton")。然后通过使用.click()您触发一个事件，如果其中一个menubutton元素被点击。在function(){}包括获得上点击执行的功能。第一的

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

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

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

添加类currentti "this" ... 表示单击的对象。

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

<div class="menubutton current">

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

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

演示

在纯 JavaScript 中，这会有点棘手。也许这个线程可以让你更深入地了解这一点：

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