WN - CSS-problem, parent

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS-problem, parent (https://www.wn.se/forum/showthread.php?t=15574)

www.bkeva.se/dev/

Jag utvecklar en site som just nu fungerar utmärkt i mozilla-baserade webbläsare eftersom de stöder :hover på alla element, men Explorer stöder det bara på a-element så nu börjar det bli jobbigt. Finns det något sätt att påverka föräldern li till a när a:hover? Jag vill lägga en bakgrund i li-elementet så att jag uppnår önskad effekt.

Det går tyvärr inte lägga den i a-elementet eftersom den redan har en egen bakgrund som ligger top right no-repeat. Eftersom a-element som är li-elementets child har högre z-index så måste bakgrunderna ligga i denna ordning. li-elementet innehåller en bild som innehåller bakgrundens vänstra och mittersta(oändliga) del och a-elementet ska innehålla den avslutande högra bilden.

Jämför i Mozilla och IE. Den fungerar i Mozilla, men inte IE.. vad ska jag göra?

Regeln som ska användas men med en ny selector ser ut som följer:

Kod:

#menu-content ul li:hover, #menu-content ul li#active {

        background: url(../images/menyflik.png);

}

Antingen får man lägga om sin struktur, med lite extra mark-up för att emulera samma effekt (flytta bara alla CSS-regler ett snäpp i hierarkin).

Kod:

#menu-content ul li a:hover, #menu-content ul li a#active {

background: url(../images/menyflik.png);

}

Och HTML:

Kod:

<div id="menu-content">

 <ul>

 <li><a href="#"><span>En länk</span></a></li>

 </ul>

</div>

Om inte det har du andra alterantiv:
http://htmldog.com/articles/suckerfish/hover/ - Använder javascript för att emulera beteendet. Rekommenderas.
http://www.xs4all.nl/~peterned/csshover.html - Använder .htc, något som enbart IE stödjer, så tanken är god.

Citat:

Originally posted by Kaffe@Aug 14 2006, 10:30
Antingen får man lägga om sin struktur, med lite extra mark-up för att emulera samma effekt (flytta bara alla CSS-regler ett snäpp i hierarkin).

Kod:

#menu-content ul li a:hover, #menu-content ul li a#active { background: url(../images/menyflik.png); }

Och HTML:

Kod:

<div id="menu-content"> <ul> <li><a href="#"><span>En länk</span></a></li> </ul> </div>

Om inte det har du andra alterantiv:
http://htmldog.com/articles/suckerfish/hover/ - Använder javascript för att emulera beteendet. Rekommenderas.
http://www.xs4all.nl/~peterned/csshover.html - Använder .htc, något som enbart IE stödjer, så tanken är god.

tack.. ska titta på det!