Forum Mjukvara Programmering och digitalt skapande Tråd

[CSS] Påverka förälder med egenskaper?

1
Skriv svar
Permalänk
Medlem
●

[CSS] Påverka förälder med egenskaper?

Jo alltså... Jag har en meny som är uppbyggt såhär:

<ul class="menu">
	<li><a href="#">Välkommen</a>
	<li><a href="#">Produkter</a>
		<ul>
			<li><a href="#">Underkategori 1</a></li>
			<li><a href="#">Underkategori 2</a></li>
			<li><a href="#">Underkategori 3</a></li>
		</ul>
	</li>
	<li><a href="#">Leverantörer</a></li>
	<li><a href="#">Formulär</a></li>
	<li><a href="#">Kontakta oss</a></li>
</ul>

Hovereffekt på föräldern ul (huvudmenyn) är att den byter bakgrundsfärg. Och jag skulle gärna vilja behålla den bakgrundsfärgen när man är nere i en underkategori (dropdown). Men den knappen "släcks" ju igen eftersom jag med musen lämnar huvudknappen.

Alltså jag vill att "Produkter" ska ha sin hovereffekt även när jag är nere på t.ex. "Underkategori 2". Går det här att ordna eller måste detta göras med JS ?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Stoppa in ul i a-elementet så kan du styla den genom .menu a:hover ul

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

bör gå alldeles utmärkt att köra psuedo selectorn :hover direkt på UL elementet.

ul:hover {}

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Teknocide
Stoppa in ul i a-elementet så kan du styla den genom .menu a:hover ul

Får man inte göra, inte bra. (Inline-element får inte innehålla block-element).
Gör som BlueEyes säger istället, det fungerar i alla webbläsare utom IE6, och påverkar inte besökarna med IE6 på något större negativt sätt.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av You
Får man inte göra, inte bra. (Inline-element får inte innehålla block-element).
Gör som BlueEyes säger istället, det fungerar i alla webbläsare utom IE6, och påverkar inte besökarna med IE6 på något större negativt sätt.

Jodå, i HTML 5
edit: tilläggas bör att jag antog att det var ok i tidigare revisioner också..

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Teknocide
Jodå, i HTML 5
edit: tilläggas bör att jag antog att det var ok i tidigare revisioner också..

Mh, det verkar visst vara det (i HTML5, inte i tidigare revisioner). Jag hade ändå avstått från det eftersom det blir lite odefinierat... hela listan kommer ju att räknas till det första a-elementet, även de a-element som ligger i listan. Vad händer om du klickar på en länk? Utanför en länk men i listan? Vill man att det ska hända?

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av BlueEyes
bör gå alldeles utmärkt att köra psuedo selectorn :hover direkt på UL elementet.

ul:hover {}

'
Tack så jättemycket för hjälpen. Fungerar bra. Underkategorin har en annan hoverfärg men det löste sig fint:

ul.menu li:hover a {
	background: #3d3d3d;
}
ul.menu ul li a:hover {
	background-color: #be7823;
}
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara