：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;
}

这将覆盖内联样式