:悬停在<灯光>after backgroundColor的变化
:hover not working on <li> after backgroundColor change
我已经设法得到一个<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悬停定义中的定义规则。结果是,你的鼠标悬停永远不会记录背景颜色的变化。
兄弟姐妹的问题
代码的另一个问题是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; }
,将显示这种行为。
下面是该行为的演示:http://jsfiddle.net/Yu97H/1/
相关文章:
- missing ) after argument list DATEDIF
- SlideDown()不会'不能在jQuery中使用After()
- setTimeOut AFTER jQuery表单提交
- 插入后单击锚点标记上的事件after不起作用
- 在javascript中修改pseudo-select:after
- Activates javascript after 'x' seconds
- jQuery after() uncatch SyntaxError: 意外令牌 ILLEGAL
- Make:如果父元素溢出,after元素将扩展到全宽
- 为node.js中的方法设置before/after钩子
- wrap() 不能很好地与 after() 一起使用
- Select2 minimumInputLength Not Working After append()
- After Effects/ExtendScript Function.caller等效程序
- target string after second <br> jquery
- Call Javascript After Directive Renders DOM for ShareThis
- jQuery:如何选择所有具有:before或:after的伪元素
- SyntaxError: missing ) after argument list in fire bug
- javascript SyntaxError: missing ) after argument list
- .after()在angularjs(嵌套ng重复递归迭代)中
- Callback after $.get?
- 在 After Effects RenderQueue 对象中定义和应用模板