Vis/skjul med html+css, nesten der, men trenger hjelp

Rognalf · 14. april 2009

Jeg har nesten greid å implementere en vis/skjul funksjon vha html+css. Det fungerer både ved bruk av :hover og :active, men ingen av de to metodene er optimale.

Slik som det er nå har jeg brukt :active på overskriften 2008, som endrer display-verdi for innholdet under når den aktiveres. Dessverre forsvinner innholdet når jeg slipper museknappen.

Har noen dessuten noen forslag til hvordan jeg kan få dette til å funke i IE(7), eller støtter ikke dette klovneriet pseudo-elementer?

HTML: http://rognalf.com/v3/music.html

CSS: http://rognalf.com/v3/stil.css

Jeg må vel kanskje bruke JavaScript for å gjøre dette, men det hadde vært veldig kjekt å få det til med ren html+css.

På forhånd takk

Edit: jaja, hover fungerer forsåvidt ganske bra, men det er litt dumt at lista forsvinner når pilen går utenfor området.

Endret 14. april 2009 av Rognalf

PHPdude · 14. april 2009

Du sier du har prøvd en løsning med :hover, så det kan jo være dette er noe du alt har prøvd, men kombinasjonen av :hover og "+"-selectoren virker å gi et fint resultat.

http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

Fullt eksempel:

 <?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no">
<head>
 <title>Test</title>
 <style type="text/css">
	 h2, ul {
		 margin:0px;
	 }
	 .year ul {
		 display:none;
	 }
	 h2:hover + ul, ul:hover {
		 display:block;
	 }
 </style>
</head>
<body>
 <div class="year">
	 <h2>2008</h2>
	 <ul>
		 <li><a href="mp3/xp.mp3">XP</a></li>
		 <li><a href="mp3/trondertrall.mp3">Trøndertrall</a></li> 
		 <li><a href="mp3/victoriafallsover.mp3">Victoria Falls Over</a></li>
		 <li><a href="mp3/skinnvesthockeysveisogbart.mp3">Skinnvest, Hockeysveis og Bart</a></li>
		 <li><a href="mp3/sirkus.mp3">Sirkus</a></li>
		 <li><a href="mp3/cheerfulintoxicated80scartoonsuperheroes.mp3">Cheerful Intoxicated 80s Cartoon Superheroes</a></li>
		 <li><a href="mp3/balls.mp3">Schesham (Hairy Balls) (Rognalf's Blip-Blop-Gangsta Remix)</a></li>
		 <li><a href="mp3/intestinefeast.mp3" >Intestine Feast</a> (as <a href="http://www.myspace.com/beardestroyer">Bear Destroyer</a>)</li>
		 <li><a href="mp3/barnetovet.mp3">Barne-Tøvet</a></li>
	 </ul>
 </div>
</body>
</html>

For IE er det kun versjon 8, som klarer å vise dette riktig.

Edit: På papiret skal visst også IE7 klare det, men har ikke testet.

Endret 14. april 2009 av PHPdude

Rognalf · 15. april 2009

Ah beklager, glemte å oppdatere *med* hover i eksemplet mitt. Har gjort det nå.

Jeg vet ikke helt om jeg skjønner hva +selectoren gjør, men det funker hvertfall i IE7, noe eksemplet mitt ikke gjør.

Jeg vet fremdeles ikke om dette er den beste løsningen. Det ville kanskje vært bedre å lage separate HTML-dokumenter; men da kan man riktignok ikke velge hvilke lister man vil ha åpne.

Logg inn

Vis/skjul med html+css, nesten der, men trenger hjelp

Anbefalte innlegg

Rognalf

Lenke til kommentar

Videoannonse

PHPdude

Lenke til kommentar

Rognalf

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer