悬停效果不会激活其他元素[重复]

Posted 2023-03-25

【中文标题】悬停效果不会激活其他元素[重复]

【英文标题】：Hover effect does not activate other element [duplicate]

【发布时间】：2020-09-01 06:19:35

【问题描述】：

出于某种原因

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

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

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

【参考方案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>

【讨论】：

谢谢拉尔吉！我已经为此苦苦挣扎了一段时间

【参考方案2】：

符号~ 是通用兄弟组合子。来自MDN docs：

通用兄弟组合符 (~) 分隔两个选择器，并且仅当第二个元素跟在第一个元素之后（尽管不一定立即）匹配第二个元素，并且它们都是同一个父元素的子元素。

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

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