[英]Change style of one particular list item by hovering it - CSS
我有一个像这样的列表，我希望它将我悬停的列表项的字体粗体更改为粗体，而不是将更改应用于我的文档所有列表的整个列表（取决于我的尝试）
li:hover { cursor: pointer; font-weight: bold; }
<.DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="2.css"> </head> <body> <ul class="tree" id="tree"> <li>Animals <ul> <li>Mammals <ul> <li>Cows</li> <li>Donkeys</li> <li>Dogs</li> <li>Tigers</li> </ul> </li> <li>Other <ul> <li>Snakes</li> <li>Birds</li> <li>Lizards</li> </ul> </li> </ul> </li> <li>Fishes <ul> <li>Aquarium <ul> <li>Guppy</li> <li>Angelfish</li> </ul> </li> <li>Sea <ul> <li>Sea trout</li> </ul> </li> </ul> </li> </ul> </body> </html>
我想知道有没有办法在不向元素添加 ID 或类的情况下做到这一点。
我希望它以动态的方式进行。
如果有办法用 JS 做到这一点，那也很棒。
按照@Armin Guearmazi的回答，这应该有点工作：
ul li ul li ul li:hover, ul li ul li:hover, ul li:hover { cursor: pointer; font-weight: bold; } ul li ul li:hover ul, ul li:hover li, ul li:hover ul { cursor: normal; font-weight: normal; }
<.DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="2.css"> </head> <body> <ul class="tree" id="tree"> <li>Animals <ul> <li>Mammals <ul> <li>Cows</li> <li>Donkeys</li> <li>Dogs</li> <li>Tigers</li> </ul> </li> <li>Other <ul> <li>Snakes</li> <li>Birds</li> <li>Lizards</li> </ul> </li> </ul> </li> <li>Fishes <ul> <li>Aquarium <ul> <li>Guppy</li> <li>Angelfish</li> </ul> </li> <li>Sea <ul> <li>Sea trout</li> </ul> </li> </ul> </li> </ul> </body> </html>
这是一种似乎有效的方法。 解释：
li元素被明确地赋予font-weight: normal以便font-weight: bold父元素不会级联。mouseover事件处理程序放置在顶层以处理所有后代事件。 addEventListener的true useCapture参数允许我们这样做。li目标。li的font-weightli元素 const tree = document.getElementById('tree'); tree.addEventListener('mouseover', (event) => { if (event.target.tagName === 'LI') { event.target.style.fontWeight = 'bold'; event.stopPropagation(); } }, true); tree.addEventListener('mouseout', (event) => { if (event.target.tagName === 'LI') { event.target.style.removeProperty('font-weight'); } }, true);
#tree li { cursor: pointer; font-weight: normal; }
<.DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="2.css"> </head> <body> <ul class="tree" id="tree"> <li>Animals <ul> <li>Mammals <ul> <li>Cows</li> <li>Donkeys</li> <li>Dogs</li> <li>Tigers</li> </ul> </li> <li>Other <ul> <li>Snakes</li> <li>Birds</li> <li>Lizards</li> </ul> </li> </ul> </li> <li>Fishes <ul> <li>Aquarium <ul> <li>Guppy</li> <li>Angelfish</li> </ul> </li> <li>Sea <ul> <li>Sea trout</li> </ul> </li> </ul> </li> </ul> </body> </html>
Rest 一切正常，试试这个 CSS 代码：
ul li ul li ul li:hover {
/* Here write your styling code */
}
我希望这会有所帮助。
ul li ul li ul li:hover {
cursor: pointer;
font-weight: bold;
}
用这个替换你的样式，你会对 go 很好。
如何在悬停Google Plus One按钮时更改光标样式
[英]How to change cursor style when hovering the Google Plus One button
CSS / JQuery：将鼠标悬停在另一个列表项上时，菜单列表标题会下拉
[英]CSS/JQuery: Menu List Titles Drop Down When Hovering Over Another List Item
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.