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?
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.
.header:hover:before, kierujesz się na element :before, gdy jesteś najechany na nagłówek. Nie kierujesz :najechaniem tylko na element :before.
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>Podobne pytania
Nowe pytania
html
HTML (HyperText Markup Language) to język znaczników służący do tworzenia stron internetowych i innych informacji wyświetlanych w przeglądarce internetowej. Pytania dotyczące HTML powinny zawierać minimalny możliwy do odtworzenia przykład i pewne wyobrażenie o tym, co próbujesz osiągnąć. Ten tag jest rzadko używany samodzielnie i często jest łączony z [CSS] i [javascript].
<button>zawierającego<img>z tekstemalti 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ą.