"使用 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