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

【问题标题】：Changing backgroundColor with javascript affects CSS's :hover使用 javascript 更改背景颜色会影响 CSS :hover
【发布时间】：2013-07-02 11:22:09
【问题描述】：

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

由于单击时“信息” div 会发生变化，因此我希望当前选定的 div 不断突出显示，其颜色与悬停时完全不同。所以我为此使用了javascript。我调用了一个函数来改变 all 的“按钮”的背景颜色（所以我不必“记住”点击了哪个按钮），然后将 this div 的 backgroundColor 更改为合适的颜色。

但是，现在我丢失了 :hover 和 :active 样式。如何处理？

这里是要求的代码sn-ps：

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;
}

【问题讨论】：

你能发布你的代码吗？这是为了让我们更容易理解并给出解决方案。
我调用了一个改变背景颜色的函数......请复制粘贴这个函数......我想说我做了一架飞机。为什么它不飞？

标签： javascript css

【解决方案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 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?

【讨论】：

不能使用 jQuery，因为...好吧，从来没有研究过它。 Jsut 三天前开始使用 HTML、CSS 和 JS，所以我想先看看这些东西是如何工作的。由于我不明白，您能否详细说明您的解决方案？
classList api几乎一样好（虽然不是完全跨浏览器，遗憾的是）。
提前致谢。不过，您不必创建整个 jsfiddle，只需一行我用 JS 更改/切换 div 的样式就可以了，并简要说明它是如何工作的。
jQuery 只是一个包含许多有用 JS 函数的库 ...所以首先你必须在你的 html 头部的某个地方包含 jQuery 本身......这样你可以使用它的功能......你必须在调用这些功能之前包含它。然后，您可以在 .js 文件或脚本块中编写 jQuery 函数，就像使用其他 JS 脚本一样。你当然可以将 jQuery 函数与任何原生 JS 结合起来。
You could start maybe with this tutorial 并了解如何将其集成到您的页面here。您可以在jQuery homepage 和大量教程中找到有关所有功能的大量文档。希望对您有所帮助^_^

【解决方案2】：

您应该广泛使用 jquery 的 .hover() 函数。

查看http://api.jquery.com/hover/ & http://api.jquery.com/click/

这些示例，您可以轻松做到这一点。

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

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

$(selector).click(event);

干杯

【讨论】：