Utfordring: :hover på definition list

[Imaginary]

 

Endret 23. juli 2011 av Imaginary

[itsmebth]

Noe sånt som det her: http://jsfiddle.net/8WNje/?

[Imaginary]

 

Endret 23. juli 2011 av Imaginary

[Jesper Karsrud]

Hmm, dette høres interessant ut. Hva er usecaset her, siden du skal ha både dt og dd til å være lenker? Høres nesten ut som du bruker feil type liste her, et usecase-eksempel hadde vært nice igrunn.

[Imaginary]

 

Endret 23. juli 2011 av Imaginary

[Matsemann]

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.