[英]How to change the color of li elment on hover in html?
I want to change the color of <li>
element on hover. 我想在悬停时更改<li>
元素的颜色。 problem is that when I hover on child li elements, the color of parent <li>
element also getting change. 问题是,当我将鼠标悬停在子li元素上时,父<li>
元素的颜色也会改变。
See following example: 请参见以下示例:
HTML: HTML:
<div id="tree">
<ul>
<li>apple</li>
<li>banana</li>
<li>mango
<ul>
<li>date</li>
<li>pear</li>
<li>fig</li>
</ul>
</li>
</ul>
CSS: CSS:
#tree > ul > li:hover {
background:brown;
}
#tree > ul > li:hover > ul >li{
background:white;
}
#tree > ul > li > ul > li:hover {
background:yellow;
}
https://jsfiddle.net/1v57nwg8/ https://jsfiddle.net/1v57nwg8/
Any help using css, javascript or jquery appreciated. 感谢使用css,javascript或jquery的任何帮助。
Put a SPAN or something else around the text content of the LIs: 将SPAN或其他内容放在LI的文本内容周围:
HTML: HTML:
<div id="tree">
<ul>
<li><span>apple</span></li>
<li><span>banana</span></li>
<li><span>mango</span>
<ul>
<li><span>date</span></li>
<li><span>pear</span></li>
<li><span>fig</span></li>
</ul>
</li>
</ul>
</div>
CSS: CSS:
#tree > ul > li:hover > span {
background:brown;
}
#tree > ul > li > ul > li:hover > span {
background:yellow;
}
If I'm guessing at your question correctly, you need to add a rule for the child ul
so its background doesn't inherit its color from its parent li
: 如果我正确地猜到了您的问题,则需要为子ul
添加一条规则,以便其背景不会从其父li
继承其颜色:
#tree > ul > li:hover > ul {
background:white;
}
Live Example : 现场示例 :
#tree > ul > li:hover { background:brown; } #tree > ul > li:hover > ul >li{ background:white; } #tree > ul > li > ul > li:hover { background:yellow; } /* This is the new rule: */ #tree > ul > li:hover > ul { background:white; }
<div id="tree"> <ul> <li>apple</li> <li>banana</li> <li>mango <ul> <li>date</li> <li>pear</li> <li>fig</li> </ul> </li> </ul> </div>
Try this: 尝试这个:
#tree > ul > li:hover > div { background:brown; } #tree > ul > li > ul > li:hover { background:yellow; }
<div id="tree"> <ul> <li><div>apple</div></li> <li><div>banana</div></li> <li><div>mango</div> <ul> <li>date</li> <li>pear</li> <li>fig</li> </ul> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.