悬停效果不会激活其他元素

Question

出于某种原因

#item1:hover ~ #item1::before{ display: block; }

当我将鼠标悬停在 1 #item 上时，实际上并没有在块中显示我想要的元素。

这是代码，提前感谢！ https://jsfiddle.net/dyus45w0/

Answer 1

更改 CSS

* {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
background: #2a2e33;
align-items: center;
width: 100%;
height: 60px;
position: relative;
}
#logo {
color: white;
margin-left: 10px;
position: relative;
}
#list {
display: flex;
height: 100%;
list-style: none;
color: white;
}
li {
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
max-height: 100%;
position: relative;
}
li:hover {
background: #1e2329;
}
li::before {
content: "";
background-color: chocolate;
width: 100%;
height: 4px;
position: absolute;
top: 0;
left: 0;
display: none;
}
li:hover::before {
display: block;
}

<header>
<h1 id="logo">LOGO</h1>
<ul id="list">
<li id="item1">HOME</li>
<li id="item2">ABOUT US</li>
<li id="item3">CONTACT</li>
<li id="item4">BLOG</li>
</ul>
</header>

Answer 2

符号~是一般的同级组合器。来自 MDN 文档：

一般同级组合器 (~( 将两个选择器分开，并且仅当第二个元素跟在第一个元素之后时才匹配第二个元素(尽管不一定立即(，并且两者都是同一父元素的子元素。

你的元素#item1没有同级#item1，因为它是该元素本身。换句话说，元素不能跟随自身。

这意味着您的 CSS 选择器不能匹配任何元素，因为没有两个元素可以具有相同的id。