使用 JavaScript 设置背景颜色会破坏 CSS 悬停行为答案

【问题标题】：Setting background color with JavaScript breaks the CSS hover behavior使用 JavaScript 设置背景颜色会破坏 CSS 悬停行为
【发布时间】：2014-04-26 14:38:15
【问题描述】：

我正在尝试创建一个菜单，其中当前选择（单击）的元素具有与其他元素不同的背景颜色（我正在尝试使用 JavaScript 来实现这一点）。我还使用 CSS :hover 伪类通过突出显示悬停元素来突出它。但是，我遇到了一个奇怪的问题：当我用 JavaScript 设置任何元素的背景颜色时，它的 CSS 悬停行为不再起作用。也就是说，我不能再通过悬停来突出显示该元素。我已经在 Firefox 和 Chromium 中检查过了。 jQuery 和纯 JavaScript 都是这种情况。

代码如下。我已经简化了很多以缩小问题范围。首先尝试悬停任何菜单项，然后单击“设置背景颜色”链接并再次悬停其中一个菜单元素。我期望的是元素在悬停时变红（#f00），无论是否单击了“设置背景颜色”按钮。 对于 jsfiddle 链接，请转到底部。

原版 JavaScript：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            p#links a {
                display: inline-block;
                width: 80px;
                height: 22px;
                line-height: 22px;
                background-color: #00f;
                color: #fff;
                text-decoration: none;
                text-align: center;
                font-family: sans-serif;
            }

            p#links a:hover {
                background-color: #f00;
            }       
        </style>
        <title>Background color</title> 
    </head>
    <body>
        <p id="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
        </p>
        <a href="#" id="setbgcolor">Set background color</a>

        <script>
            document.getElementById('setbgcolor').onclick = function() {
                var p = document.getElementById('links');
                var elements = p.getElementsByTagName('a');
                for (var i = 0; i < elements.length; i++)
                    elements[i].style.backgroundColor = '#ff0';
            };
        </script>
    </body>
</html>

jQuery:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.11.0.js"></script>
        <style>
            p#links a {
                display: inline-block;
                width: 80px;
                height: 22px;
                line-height: 22px;
                background-color: #00f;
                color: #fff;
                text-decoration: none;
                text-align: center;
                font-family: sans-serif;
            }

            p#links a:hover {
                background-color: #f00;
            }       
        </style>
        <title>Background color</title> 
    </head>
    <body>
        <p id="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
        </p>
        <a href="#" id="setbgcolor">Set background color</a>

        <script>
            $('a#setbgcolor').click(function() {
                $('p#links a').css('background-color', '#ff0');
            });
        </script>
    </body>
</html>

为了方便起见，这里是 jsfiddle.net 链接：
纯 JavaScript：http://jsfiddle.net/5yQFM/1/
jQuery：http://jsfiddle.net/5yQFM/

【问题讨论】：

标签： javascript jquery css hover

【解决方案1】：

jQuery css() 方法映射到 style 属性，该属性映射到 style 属性。

style 属性中的规则比样式表中的规则更具体，因此在the cascade 中始终位于它们之后。

不要直接更改元素上的 CSS，而是将其更改为 changing the classes 元素所属并具有预先准备好的样式表。

【讨论】：

我喜欢你解释它的事实，虽然我很难理解......你的建议看起来如何“代码明智”？（注意，我不是 OP，只是好奇）

【解决方案2】：

通过添加类在 CSS 中而不是在 Javascript 中保持样式怎么样？

所以行：

elements[i].style.backgroundColor = '#ff0';

改成

elements[i].className = 'myClassForBackgrounds';

或在 jQ 版本中

$('p#links a').css('background-color', '#ff0');

到：

$('p#links a').addClass('myClassForBackgrounds');

这样你就可以像往常一样设置:hover

#links a:hover, .myClassForBackgrounds:hover { background-color:#ff0; }

【讨论】：

【解决方案3】：

你需要在悬停时使用!important，基本上它会增加它的优先级。

试试这个，

p#links a:hover {
    background-color: #f00 !important;
}

DEMO

正如 Quentin 所说，它看起来很脏，所以在这种情况下，我们可以利用类优先级概念。

HTML：

<a class='normal' href="#">Link 1</a>
<a class='normal' href="#">Link 1</a>

CSS：

.normal { background-color: blue; } 
.abnormal{ background-color: yellow; }

.normal:hover { background-color: #f00; }

JS：

$('p#links a').attr('class', 'abnormal normal');

DEMO Non-Dirty one

【讨论】：

快速但肮脏。避免使用!important 规则。他们只深入一层。通过仔细应用特异性，您可以获得更好的控制（和关注点分离）。
@Quentin 是的，我想，!important 是为处理这种情况而设计的。 :)
@Quentin + Downvoter ：我刚刚清理了代码，如果可以的话，只需评估并恢复您的 downvote .. 谢谢。 :)

【解决方案4】：

只是为了一个更简单的答案，能够重新启用css规则只需让它在颜色和“”之间切换，所以

document.getElementById("id").style.backgroundColor = "rgb(255, 125, 15)";

如果该元素尚未通过 javascript 着色。现在，如果您的元素已经着色，代码将如下所示：

document.getElementById("id").style.backgroundColor = "";

这会重新启用 CSS，这样你的选择器就可以工作了。

【讨论】：

【解决方案5】：

我遇到了同样的问题并通过这样做解决了它：

我设置了一个 onmouseover 事件来将背景颜色更改为悬停颜色。

我设置了一个 onmouseout 事件来将背景颜色更改为默认颜色。

这样我就用纯javascript设置了一个悬停事件

【讨论】：