Javascript ：悬停不工作在<；李>；背景颜色变化后

我只使用了几行普通JavaScript代码，就成功地获得了一个打开和关闭显示器的

，但我遇到了一个问题

我给了开关它的

一个

：hover

值（在本例中为灰色）。我在

上保持与

折叠时相同的颜色。当

显示器关闭时，我会将其返回到与之前相同的值，但

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

项

分项

悬停与内联样式

解决方案是添加或删除具有所需样式的类名。由于css的特殊性，直接放置在

样式中的任何内容都将优先于css悬停定义中定义的规则。结果是，您的悬停永远不会记录背景颜色的变化

与兄弟姐妹的问题

代码的另一个问题是
nextSibling
和
previousSibling
将检查text节点和元素。这里的技巧是确保您看到的是实际的元素，而不是文本节点

类似这样的方法将确保最终得到一个元素（
.nodeType==1
）

以下是该概念的演示：

现在，即使有了这个工作示例，也可以单击以将灰色设置为背景，但悬停已被破坏。一个简单的规则，例如
ulli:hover{background color:blue；}
将显示该行为

下面是该行为的演示：
您可以使用！css中的重要修改器。大概是这样的：

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

这将覆盖内联样式
Uh…您编写的
onlick
。JavaScript中没有“click”事件，您确定您的意思不是
onclick
？（你可能想先修一下。）这是一把小提琴@Serlite谢谢！这将是一种非常不寻常的与屏幕交互的方式你也可以添加css hover属性吗？@gaurav5430:hover在单独的样式表中定义，我在这里没有包括，也许我应该有？不确定，我是新来的。谢谢你，这确实解决了问题！你知道这有没有跨浏览器的问题吗？！important具有出色的跨浏览器支持。IE5.5+、Firefox 1+、Safari 3+、Chrome 1+都支持它，尽管IE<6中可能会有一些奇怪的行为，但我们非常欢迎您——不过，请注意！重要的是一个很好的小技巧，但不应该在任何可能的地方取代好的老式级联原则。过度使用它会导致以后的头痛！祝你的项目好运！谢谢这就是我所想的，但我不确定如何以最有效的方式修复它。
ul li:hover {
   background-color:#ccc !important;
}