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

Question

出于某种原因

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

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

这是代码，在此先致谢！ 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 docs:

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

您的元素 #item1 没有兄弟元素 #item1，因为它本身就是那个元素。换句话说，一个元素不能跟随它自己。

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

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

Hover effect does not activate other element

html

css

hyperlink

hover

display