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

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

javascript jquery css

使用JavaScript设置背景色会破坏CSS悬停行为,javascript,jquery,css,hover,Javascript,Jquery,Css,Hover,我试图创建一个菜单，其中当前选中（单击的）元素的背景色与其他元素的背景色不同（我试图使用JavaScript实现这一点）。我还使用CSS：hover伪类突出显示悬停的元素，使其突出显示。然而，我遇到了一个奇怪的问题：当我用JavaScript设置任何元素的背景色时，它的CSS悬停行为不再有效。也就是说，我不能再通过悬停来突出显示元素。我已经在Firefox和Chromium中检查过了。jQuery和普通JavaScript都是这样代码如下。为了缩小问题的范围，我把它简化了很多。首先尝试悬停任何

我试图创建一个菜单，其中当前选中（单击的）元素的背景色与其他元素的背景色不同（我试图使用JavaScript实现这一点）。我还使用CSS

：hover

伪类突出显示悬停的元素，使其突出显示。然而，我遇到了一个奇怪的问题：当我用JavaScript设置任何元素的背景色时，它的CSS悬停行为不再有效。也就是说，我不能再通过悬停来突出显示元素。我已经在Firefox和Chromium中检查过了。jQuery和普通JavaScript都是这样

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

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


p#链接a{
显示：内联块；
宽度：80px；
高度：22px；
线高：22px；
背景色：#00f；
颜色：#fff；
文字装饰：无；
文本对齐：居中；
字体系列：无衬线；
}
p#链接a：悬停{
背景色：#f00；
}       
背景色


document.getElementById（'setbgcolor'）。onclick=function（）{
var p=document.getElementById（'links'）；
var elements=p.getElementsByTagName（'a'）；
对于（var i=0；i


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>


p#链接a{
显示：内联块；
宽度：80px；
高度：22px；
线高：22px；
背景色：#00f；
颜色：#fff；
文字装饰：无；
文本对齐：居中；
字体系列：无衬线；
}
p#链接a：悬停{
背景色：#f00；
}       
背景色


$（'a#setbgcolor'）。单击（函数（）{
$（'p#links a'）.css（'background-color'，'#ff0'）；
});

为了方便起见，这里有jsfiddle.net链接：

纯JavaScript:

jQuery:
jQuerycss（）
方法映射到style
属性，该属性映射到style
属性
style
属性中的规则比样式表中的规则更为具体，因此在样式表中总是紧跟其后
与其直接更改元素上的CSS，不如通过元素所属并具有预先准备好的样式表来更改它。
通过添加类将样式保留在CSS中而不是Javascript中怎么样
所以这句话：
elements[i].style.backgroundColor = '#ff0';

改为
elements[i].className = 'myClassForBackgrounds';

或者在jQ版本中
$('p#links a').css('background-color', '#ff0');

致：

这样，您就可以像平常一样设置：悬停
#links a:hover, .myClassForBackgrounds:hover { background-color:#ff0; }

您需要使用！重要信息
悬停时，基本上会增加其优先级
试试这个
p#links a:hover {
    background-color: #f00 !important;
}


正如Quentin所说，它看起来像一个脏的，所以在这种情况下，我们可以利用类优先级概念
HTML:
JS:
为了得到一个更简单的答案，我们可以重新启用css规则，让它在颜色和“”之间切换，所以
如果元素还没有通过javascript着色的话。
现在，如果您的元素已经着色，那么代码将如下所示：
document.getElementById("id").style.backgroundColor = "";

这将重新启用CSS，这样您的选择器就可以工作。
快速但肮脏。避免！重要
规则。它们只有一层深。通过仔细地应用特定性，您可以获得更好的控制（以及关注点的分离）。@Quentin是的，我想，对于处理这种情况，！重要信息是为以下目的而制作的：@昆汀+否决票：我刚刚清理了代码，如果可以的话，只需评估并恢复否决票。。谢谢。：）我喜欢你解释的事实，尽管我很难理解。。。您的推荐看起来如何“代码明智”？（注意，我不是OP，只是好奇）这很有效，谢谢
<a class='normal' href="#">Link 1</a>
<a class='normal' href="#">Link 1</a>

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

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

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

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

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