:悬停在<灯光>after backgroundColor的变化

:hover not working on <li> after backgroundColor change

本文关键字:after backgroundColor 变化 灯光 悬停      更新时间:2023-09-26

我已经设法得到一个<ul>开关显示只有几行香草JavaScript代码,但我遇到了一个问题。

我给<li>开关它打开/关闭一个:hover值(灰色在这种情况下)。当<ul>崩溃时,我保持<li>相同的颜色。当<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>

你可以在css中使用!important修饰符。像这样:

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

覆盖内联样式

悬停与行内样式

解决方案是添加或删除带有所需样式的类名。由于css的特殊性,直接放置在style中的任何内容都将优先于css悬停定义中的定义规则。结果是,你的鼠标悬停永远不会记录背景颜色的变化。

兄弟姐妹的问题

代码的另一个问题是nextSiblingpreviousSibling将检查文本节点以及元素。这里的技巧是确保您查看的是实际元素而不是文本节点。

类似这样的方法将确保您最终得到一个元素(.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; },将显示这种行为。

下面是该行为的演示:http://jsfiddle.net/Yu97H/1/