：hover無法正常工作 <li> 更改背景顏色后

Question

我已經設法得到一個<ul> ，僅用幾行原始的JavaScript代碼打開和關閉顯示，但是我遇到了一個問題。

我給出了<li>來打開/關閉它的:hover值（在這種情況下為灰色）。 我在<li>上保留與<ul>折疊時相同的顏色。 但是，當<ul>顯示關閉時，我將其恢復為以前的值，但:hover值不再起作用。 有什么解決辦法嗎？

這是我的JavaScript：

function expandIt(obj) {
    obj.nextSibling.style.display = "block";
    obj.style.backgroundColor = "gray";};

function reduceIt(obj) {
    obj.style.display = "none";
    obj.previousSibling.style.backgroundColor = "white";};

這是HTML：

<ul>
    <li onclick="expandIt(this)">ITEM</li>
        <ul onclick="reduceIt(this)">
            <li>subitem</li>
        </ul>
</ul>

Answer 1

懸停與內聯樣式

解決方案是使用所需樣式添加或刪除類名稱。 由於CSS的特殊性，任何直接放置在style東西都將優先於CSS懸停定義中定義的規則。 結果是您的懸停永遠不會記錄背景顏色的變化。

兄弟姐妹的問題

您的代碼的另一個問題是nextSibling和previousSibling將檢查文本節點以及元素。 確保您要查看的是實際元素而不是文本節點，這是技巧。

這樣的方法將確保您最終獲得一個元素（ .nodeType == 1 ）

function expandIt(obj) {
 var next = obj.nextSibling;
 while(next && next.nodeType != 1)next = next.nextSibling;
 next.style.display = "block";
 obj.style.backgroundColor = "gray";
};

function reduceIt(obj) {
 obj.style.display = "none";
 var prev = obj.previousSibling;
 while(prev && prev.nodeType != 1)prev = prev.previousSibling;
 prev.style.backgroundColor = "white";
};

這是該概念的演示： http : //jsfiddle.net/Yu97H/

現在，即使使用該工作示例，也可以單擊以將灰色設置為背景，但是鼠標懸停了。 一個簡單的規則，例如ul li:hover { background-color: blue; } ul li:hover { background-color: blue; }將表現出該行為。

這是該行為的演示： http : //jsfiddle.net/Yu97H/1/

Answer 2

您可以在CSS中使用！important修飾符來進行此操作。 像這樣：

ul li:hover {
   background-color:#ccc !important;
}

這將覆蓋內聯樣式