gpt4 book ai didi

javascript - 通过悬停特定列表项来更改其样式 - CSS

转载 作者:行者123 更新时间:2023-12-03 07:24:50 27 4
gpt4 key购买 nike

我有一个像这样的列表,我希望它将我悬停的列表项的字体粗细更改为粗体,但它不是将更改应用于我的文档的所有列表的整个列表(取决于我的尝试)

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: bold parent 身上不会级联。
  • 一个mouseover事件处理程序放置在顶层以处理所有后代事件。 true useCapture addEventListener 的参数让我们能够做到这一点。
  • 我们允许事件继续冒泡,直到达到 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com