javascript - 使用 javascript 更改背景颜色会影响 CSS :hover

Question

我有一组 6 个 div，当我单击它们中的每一个时，某个 div 会更改其 innerHTML，就像某种菜单。当用户将鼠标悬停在这些“按钮”(实际上是 div)上时，它们会使用 CSS 的属性 :hover 突出显示。还有 :active，当用户点击“按钮”时。

由于“信息”div 在单击时发生变化，我希望当前选定的 div 不断突出显示，颜色与悬停时完全不同。所以我为此使用了javascript。我调用了一个函数来更改所有“按钮”的背景颜色(这样我就不必“记住”单击了哪个按钮)，然后更改this div 的 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 中相应地分类。使用 addClass()、removeClass() 或 toggleClass() 函数，jQuery 将是最优雅的解决方案。

进一步解释这个想法:

当您单击一个按钮时，您将一个类添加到它的类属性中，而不是添加内联样式属性。这允许通过您的 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 ti "this"...表示被点击的对象。

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

<div class="menubutton current">

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

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

DEMO

在纯 JavaScript 中，这会有点棘手。也许这个线程可以让您对此有更多的了解:

How to add/remove a class in JavaScript?