我有一个像这样的列表，我希望它将我悬停的列表项的字体粗细更改为粗体，但它不是将更改应用于我的文档的所有列表的整个列表(取决于我的尝试)
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 来实现，那就太好了。
最佳答案
这是一种似乎有效的方法。解释一下:
-
li元素被显式赋予font-weight: normal这样font-weight: boldparent 身上不会级联。 - 一个
mouseover事件处理程序放置在顶层以处理所有后代事件。trueuseCaptureaddEventListener的参数让我们能够做到这一点。 - 我们允许事件继续冒泡，直到达到
li目标。 - 然后，我们以编程方式设置
font-weight对于li - 通过防止进一步传播，我们确保父级
li当后代元素已加粗时，不会通知元素
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>关于javascript - 通过悬停特定列表项来更改其样式 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62234493/