Эффект наведения не активирует другой элемент

по какой-то причине

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

на самом деле не отображает элемент, который я хотел в блоке, когда я наводил курсор на #item 1.

Вот код и заранее спасибо! https://jsfiddle.net/dyus45w0/


html css hyperlink hover display
person Brimstone    schedule 15.05.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Изменяет 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>

person Lalji Tadhani    schedule 15.05.2020
comment
Спасибо Лалджи! Я боролся с этим некоторое время - person Brimstone; 15.05.2020

arrow_upward
0
arrow_downward

Символ ~ является общим родственным комбинатором. Из документов MDN:

Общий родственный комбинатор (~) разделяет два селектора и сопоставляет второй элемент, только если он следует за первым элементом (хотя и не обязательно сразу), и оба являются дочерними элементами одного и того же родительского элемента.

У вашего элемента #item1 нет родственного элемента #item1, потому что это сам элемент. Другими словами, элемент не может следовать сам за собой.

Это означает, что ваш селектор CSS не может соответствовать ни одному элементу, потому что никакие два элемента не могут иметь одинаковые id.

person Run_Script    schedule 15.05.2020