• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed :hover nie współpracuje z <div id="">

VPS Starter Arubacloud
0 głosów
199 wizyt
pytanie zadane 25 kwietnia 2019 w HTML i CSS przez husarbilu Początkujący (370 p.)
zamknięte 3 maja 2019 przez husarbilu

Witam Forumowiczów!

Tworzę stronę w ramach treningu, do tej pory jakoś to szło jednak nad tym problemem siedzę już 2 godziny.

Co powinienem zrobić aby po najechaniu na div'a "Język/Language" rozwinęła się lista wyboru, a po najechaniu na ikonkę facebooka, youtuba lub instagrama już nie?

Próbowałem

#section > ul:hover > li

zamienić na

#section > #language:hover > li

jednak wtedy lista w ogóle się nie rozwija.

Proszę o pomoc i z góry dziękuję! :)

Kod css:

#section > ul > li{
	display: none;
}
#section > ul:hover > li{
	
	display: block;
text-align: center;
	width: 200px;
	height: 30px;
	float: left;
	border-right: 1.5px solid white;
	border-left: 1.5px solid white;
	border-bottom: 1.5px solid white;
	list-style-type:none;
  padding:0;
  margin:0;
}

HTML:

<div id="section">
			
<ul>
<div id="language">Język/Language</div>
<div id="fb"><a href=""><img id="sec" src="fb.png"></a></div>
<div id="yt"><a href=""><img id="sec" src="yt.png"></a></div>
<div id="insta"><a href=""><img id="sec" class="sec" src="insta.png"></a></div>
<li id="jez"><a href="" id="kol">Polski</a></li>
<li id="jez"><a href="" id="kol">English</a></li>
</ul>

			</div></div>

 

komentarz zamknięcia: Rozwiązane!

3 odpowiedzi

+2 głosów
odpowiedź 25 kwietnia 2019 przez radek024 Szeryf (77,180 p.)

O jejku. 

Przede wszystkim, lista składa się wyłącznie ze znaczników <li>(w przypadku list numerowych i nienumerowanych) oraz <dt> i <dd>(jeżeli chodzi nam o listę definicji). Poza tymi znacznikami nie mogą występować inne elementy. Przykład prawidłowej listy:

Moje zwięrzęta:
<ul>
 <li>pies,</li>
 <li>kot,</li>
 <li>chomik.</li>
</ul>

U Ciebie wygląda to dość.. przerażająco. 

Porównaj zapisy:

#section > ul:hover > li
#section > #language:hover > li

Czy to jest to samo? Oczywiście że nie. W pierwszym odwołujesz się do listy, a w drugim - do <div>, który jest w środku znacznika <ul>(gdzie być nie powinien rzecz jasna).

Osobiście zakodowałbym to bardziej w ten sposób: https://codepen.io/radek024/pen/axQMdV. Zbadaj kod i można implementować :) W snippecie użyłem SASSa, to takie narzędzia do wygodniejszego pisania CSS. Możesz o nim poczytać tutaj: https://radek024.github.io/blog/css/strony-www/2017/07/28/preprocesory-css-opis/

komentarz 25 kwietnia 2019 przez husarbilu Początkujący (370 p.)

Dzięki wielkie!

Niepotrzebnie dawałem tyle divów, mogłem użyć prostego szablonu

<ul>
<li></li
<li></li
<li></li
</ul>

który teraz działa!

+1 głos
odpowiedź 25 kwietnia 2019 przez jaca121212 Nałogowiec (40,760 p.)

Dodam też od siebie masz tutaj  zrobione menu na  wzór tego co  opisujesz w pytaniu 

link

komentarz 25 kwietnia 2019 przez husarbilu Początkujący (370 p.)
Przekombinowałem cały szablon, a to było takie proste!

Robiłem sobie niepotrzebnie pod górkę, no cóż

Wielkie dzięki!
komentarz 12 grudnia 2019 przez sKodowany Obywatel (1,150 p.)
Jak samemu sobie pod górkę - to zawsze jest "potrzebnie" - teraz zakodujesz materiał w głowie na wieki-wieków... ;-)
0 głosów
odpowiedź 25 kwietnia 2019 przez anm Użytkownik (780 p.)

Spróbuj wyrzucić te 3 divy pod </ul>

<div id="fb"><a href=""><img id="sec" src="fb.png"></a></div>
<div id="yt"><a href=""><img id="sec" src="yt.png"></a></div>
<div id="insta"><a href=""><img id="sec" class="sec" src="insta.png"></a></div>

O to Ci chodzi? Czy ikonki maja zostać na miejscu? 

komentarz 25 kwietnia 2019 przez husarbilu Początkujący (370 p.)
Ikonki muszą zostać na miejscu, zrobiłem tak i jest to samo.

Podobne pytania

+1 głos
1 odpowiedź 102 wizyt
0 głosów
2 odpowiedzi 228 wizyt
pytanie zadane 1 kwietnia 2016 w JavaScript przez Nicolaus Dyskutant (9,740 p.)
0 głosów
1 odpowiedź 296 wizyt
pytanie zadane 21 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...