Trädvy Permalänk
Medlem
Registrerad
Jul 2016

Pseudo class css

Hej!

Vad gör jag för fel med min pseudo klass för jag det händer ingenting när jag klickar på menyn?

.buy-link:checked .SubNav ul { display: block; width: 30px; }

.buy-link:checked och .SubNav ul hittas var för sig men inte tillsammans.

Koden nedan är i react och jag har förkortat den för att göra den med lättläst.

<div className="Nav" > <div className="Nav-inner" > <label className="Hamburger-icon" for="hamburger">☰</label> <input className="Hamburger-checkbox" type="checkbox" id="Hamburger-btn"/> <ul> <li> <Link to="/home">Home</Link> </li> <li> <Link to="/buy">Köpa</Link> <input className="buy-link" type="checkbox" id="Hamburger-btn"/> </li> <li> <Link to="/contact">Kontakt</Link> </li> </ul> </div> </div> <div className="Navs_border"> <div className="SubNav"> <ul> <li className="subNav_Box"> <Link to="/buy/badminton">Badminton</Link> </li> </ul> </div> </div>

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2013
Skrivet av Snillet71:

Hej!

Vad gör jag för fel med min pseudo klass för jag det händer ingenting när jag klickar på menyn?

.buy-link:checked .SubNav ul { display: block; width: 30px; }

.buy-link:checked och .SubNav ul hittas var för sig men inte tillsammans.

Koden nedan är i react och jag har förkortat den för att göra den med lättläst.

<div className="Nav" > <div className="Nav-inner" > <label className="Hamburger-icon" for="hamburger">☰</label> <input className="Hamburger-checkbox" type="checkbox" id="Hamburger-btn"/> <ul> <li> <Link to="/home">Home</Link> </li> <li> <Link to="/buy">Köpa</Link> <input className="buy-link" type="checkbox" id="Hamburger-btn"/> </li> <li> <Link to="/contact">Kontakt</Link> </li> </ul> </div> </div> <div className="Navs_border"> <div className="SubNav"> <ul> <li className="subNav_Box"> <Link to="/buy/badminton">Badminton</Link> </li> </ul> </div> </div>

Därför det finns ingen sibling till buy-link då SubNav ul ligger i en helt annan div.
Om du kör i React hade jag hanterat det i state och visat/döljt beroende på checked state.

Edit:
Vill du använda dig av CSS ändå så får du se till att den ul-taggen du vill visa ligger i samma träd som din input exempel

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Jul 2016

@zaibuf: Tack, då får det bli state istället.