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

Question

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

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

香草 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>

Answer 1

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

style属性中的规则比样式表中的规则更具体，因此始终会在层叠中排在它们之后。

与其直接更改元素上的CSS，不如通过更改元素所属的类并具有预先准备的样式表来对其进行更改。

Answer 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设置:hover

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

Answer 3

您需要在悬停时使用!important ，基本上它将增加其优先级。

尝试这个，

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

演示

正如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');

示范非肮脏的一

Answer 4

为了获得更简单的答案，只要能够重新启用CSS规则，只需在颜色和“”之间切换即可，因此

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

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

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

这将重新启用CSS，以便选择器可以工作。

Answer 5

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

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

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

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

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

问题描述

5 个解决方案

解决方案1
6 已采纳 2014-04-26 14:42:05

解决方案2
5 2014-04-26 14:43:47

解决方案3
3 2014-04-26 14:44:00

演示

示范非肮脏的一

解决方案4
0 2015-01-24 23:00:21

解决方案5
0 2022-02-03 02:32:41

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

问题描述

5 个解决方案

解决方案1 6 已采纳 2014-04-26 14:42:05

解决方案2 5 2014-04-26 14:43:47

解决方案3 3 2014-04-26 14:44:00

演示

示范非肮脏的一

解决方案4 0 2015-01-24 23:00:21

解决方案5 0 2022-02-03 02:32:41

解决方案1
6 已采纳 2014-04-26 14:42:05

解决方案2
5 2014-04-26 14:43:47

解决方案3
3 2014-04-26 14:44:00

解决方案4
0 2015-01-24 23:00:21

解决方案5
0 2022-02-03 02:32:41