html - Et element aktiverer et andet elements hover effekt. - Udvikleren.dk

Tags: html css

Bruger #8870 @ 06.02.06 12:51

Hej.

Vi forestiller os der er to links:
<a href="#">foo</a>
<a href="#">bar</a>

Når jeg kører musen over foo, skal der aktiveres en hover effekt på bar. Hvordan får jeg dette til at virke? Hover egenskaberne skal være defineret vha. css.

Noget javascript kunne jeg forestille mig?

På forhånd tak.
- Tommy

5 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #8934 @ 07.02.06 17:47

'disabled' er rigtig nok ikke en attribut i XHTML, men det er en del af DOM.
Følgende kan valideres:

Kode

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head><title></title>

<style id="BasicStyle" type="text/css">
#ENABLESTYLE, #DISABLESTYLE {	background:wheat;	color:sienna;}
</style>

<style id="HoverStyle" type="text/css">
#LINK {	font:bold 12pt lucida console;}
#LINK:hover {	background:red;}
</style>

<script type="text/javascript">
function toggleStyle(bool) {
	document.getElementById("HoverStyle").disabled = bool
}
toggleStyle(true)
</script></head><body>
<p><a id="ENABLESTYLE" href="#" onmouseover="toggleStyle('')" >Enable hoverstyle</a>
<a id="DISABLESTYLE" href="#" onmouseover="toggleStyle('disabled')" >Disable hoverstyle</a>
<a id="LINK" href="#">Hover Link</a></p>
</body></html>

Bruger #5010 @ 06.02.06 13:36

Hej.

Vi forestiller os der er to links:
<a href="#">foo</a>
<a href="#">bar</a>

Når jeg kører musen over foo, skal der aktiveres en hover effekt på bar. Hvordan får jeg dette til at virke? Hover egenskaberne skal være defineret vha. css.

Noget javascript kunne jeg forestille mig?

På forhånd tak.
- Tommy

Ved ikke lige umiddelbart hvordan man gør det - men noget js har du nok ret i skal til...
Men af ren og skær nysgerrighed, vil jeg gerne vide hvad du skal bruge det til ?

Hey - det var satans!

Bruger #8934 @ 06.02.06 17:27

Er det det her du søger?

Kode

<html><head>

<style id="HoverStyle" disabled = true>
#LINK {
	font:bold 12pt lucida console;
}
#LINK:hover {
	background:red;
}
</style>

<style id="BasicStyle">
#ENABLESTYLE, #DISABLESTYLE {
	background:wheat;
	color:sienna;
}
</style>

<script>
function toggleStyle(bool) {
	document.getElementById("HoverStyle").disabled = bool
}
</script></head><body>
<a id="ENABLESTYLE" href="#" onmouseover="toggleStyle(false)" >Enable hoverstyle</a>
<a id="DISABLESTYLE" href="#" onmouseover="toggleStyle(true)" >Disable hoverstyle</a>
<a id="LINK" href="#">Hover Link</a>
</body></html>

Bruger #8870 @ 06.02.06 19:46

Lige nøjagtig, mange tak.

Men, i firefox starter "HoverStyle" med at være aktiveret, og det skulle gerne være deaktiveret til at starte med, lige som i IE. Har du nogen løsning på det?

Bruger #8870 @ 06.02.06 21:05

Tror også det er lidt noget slam, eftersom <style> ikke har nogen attribut kaldet disabled

Andre forslag der kan valideres, gerne som XHTML Strict?

Et element aktiverer et andet elements hover effekt.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler