Gå til innhold

Utfordring: :hover på definition list


Anbefalte innlegg

Videoannonse
Annonse

Så vidt jeg vet finnes det ingen grei måte å gjøre dette på uten å gruppere tingene ytterligere.

 

Eksempel

<div class="en">
<a href="hahaha" class="to">hihihihi</a><br>
laldlsdlalsdlasdl
</div>

.en:hover .to {
color:#3F0;
}

Gjør at uansett hvor i DIVen man holder, vil man kunne style .to som man vil. Dette virker derimot ikke andre veien, slik at om man holder over .to, så kan man ikke endre på .en. Poenget mitt er: Skal man endre på ting vha hover, må det være på elementet selv eller barn av dette skal man bruke denne metoden.

Derfor vil du ikke kunne snu koden her.

 

En løsning kan være å gi tilhørende elementer en felles parent de kan relatere til. Et kjapt utkast, som viser hvordan du kan style dt og dd forskjellig om du vil:

<dl>
<div class="group">
	<dt>Address</dt>
	<dd>sensurert</dd>
</div>

<div class="group">
	<dt>E-mail</dt>
	<dd>noe</dd>
</div>

<div class="group">
	<dt>Telephone</dt>
	<dd>(324324532634564536</dd>
</div>
</dl>

 

<style>
.group:hover dt {
background-color:#603;
}
.group:hover dd {
background-color:#3CF;
}
</style>

 

Resultat:

http://jsfiddle.net/e5SnA/

 

Du var forøvrig stud.ass for meg i diskmat i år, hehe. Håper dette var til hjelp. :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...