Zrobiłem burger-menu z pseudoelementem. Teraz muszę pokazać menu, jeśli pseudoelement jest najechany. Mogę to wybrać w ten sposób :.header:hover:before Ale nie mogę zmusić menu, żeby od tego zależało.

To jest struktura html:

<header class="header">
    <a href="#"><img src="img/logo.svg" alt="logo" class="logo logo_header"></a>
    <nav class="menu menu_header">It's a menu</nav>
    <div class="contacts-header">Some contacts here</div>
</header>

To CSS:

.header:before {
        content: '';
        display: block;
        width: 40px;
        height: 30px;
        background-image: url("../img/icon-burger-menu.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
.menu {
        display: none;
    }

    .header:hover:before **???** {
        display: block;
    }

Czy w tym przypadku można użyć selektora?

wprowadź opis obrazu tutaj

0
Marina 18 grudzień 2019, 10:56
Jaki dokładnie efekt chcesz osiągnąć? Nie sądzę, że możesz ustawić :hover na pseudo elemencie bezpośrednio za pomocą tylko css.
 – 
JasperZelf
18 grudzień 2019, 11:45
Chciałbym najechać na menu z burgerami i pokazać blok menu. Po prostu nie chcę używać JS w tak łatwym przypadku. Wygląda to tak łatwo, jeśli najechanie pseudo-elementem, zmień display:none na display: block dla menu.
 – 
Marina
18 grudzień 2019, 11:50
1
Użyj <button> zawierającego <img> z tekstem alt i JavaScript, aby uruchomić. Wtedy będzie działać dla osób, które nie mogą używać myszy lub które polegają na czytnikach ekranu. Hacki CSS dla "łatwych" interakcji to tylko przyczyny problemów z dostępnością.
 – 
Quentin
18 grudzień 2019, 12:07
Dobra rada, ale nie mogę zmienić html...
 – 
Marina
18 grudzień 2019, 12:30

2 odpowiedzi

Myślę, że najlepiej byłoby, gdyby menu z hamburgerami było rzeczywistym elementem, a nie pseudoelementem.

Pseudo elementy mają pewne ograniczenia. Jedną z nich jest to, że nie można dodawać do nich stanów „: hover”.

Jako dodatkowy bonus myślę, że byłoby to bardziej przyjazne rozwiązanie dla programistów. Jeśli inny programista będzie musiał zmienić Twój kod (a Ty za rok), będzie mógł zobaczyć menu w Twoim kodzie HTML. HTML służy do znaczników, CSS do stylizacji.

:before i :after są zwykle używane do drobnych dodatków w kodzie. Nie w przypadku ważnych elementów, takich jak nawigacja.

2
JasperZelf 18 grudzień 2019, 12:00
Ale mogę dodać zachowanie najechania „.header:hover:before”, czyli co masz na myśli? czy mógłbyś wyjaśnić proszę? Po prostu nie mogę połączyć pseudoelementu z blokiem menu. Ta wersja na adaptacyjną, po prostu nie chcę zmieniać struktury html na wersję adaptacyjną, więc użyłem tutaj pseudo-elementu
 – 
Marina
18 grudzień 2019, 12:24
Kiedy celujesz w .header:hover:before, kierujesz się na element :before, gdy jesteś najechany na nagłówek. Nie kierujesz :najechaniem tylko na element :before.
 – 
JasperZelf
18 grudzień 2019, 13:04

Możesz dodać :hover do pseudoelementów, ale pseudoelementy nie mogą wpływać na ich własne elementy (nie w CSS).

Oto krótkie podsumowanie z możliwościami elementów i stanów najechania pseudoelementami.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 600px;
}

div {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
div:not(.pseudo-hover):hover::before {
  background-color: pink;
}
div.pseudo-hover:hover::before {
  background-color: pink;
}
div.pseudo-hover::before, div.pseudo-hover-all::before {
  pointer-events: initial;
}
div.pseudo-hover-all {
  pointer-events: none;
}
div::before {
  content: '::before';
  position: absolute;
  width: 60%;
  height: 50%;
  background-color: aquamarine;
  top: 0;
  right: -60%;
  cursor: pointer;
  pointer-events: none;
}
<h3>Hover on element affects to pseudo-element</h3>
<div>Element</div>
<h3>Hover on pseudo-element or element affects to pseudo-element</h3>
<div class="pseudo-hover">Element</div>
<h3>Hover on pseudo-element affects only to pseudo-element</h3>
<div class="pseudo-hover-all">Element</div>
0
Alberto Rhuertas 18 grudzień 2019, 12:16