Påverka div#2's bakgrund m h a :hover i div#1

joel_sundkvistMedlem sedan feb. 2003240 inlägg

Frågan15 maj 2005 22:16#1

Jag har suttit och lekt lite med möjlligheten att byta bakgrund i div#2 vid hover på div#1 utan att använda javascript. Har nu kört fast rejält. Är det någon som vet om detta överhuvudtaget är möjligt?

Tacksam för svar! :)

azvarethMedlem sedan maj 20054 inlägg

15 maj 2005 23:00#2

kan inte svara på rak arm (tror det har att göra med huruvida div#1 är barn eller syster med div#2) mer hjälp kan du kanske finna här:
http://css.maxdesign.com.au/selectutorial/

joel_sundkvistMedlem sedan feb. 2003240 inlägg

15 maj 2005 23:34#3

Jo, så långt är jag med men jag får det inte att gå ihop i praktiken.

Det känns som jag sökt igenom hela internet efter detta. ;)

joel_sundkvistMedlem sedan feb. 2003240 inlägg

16 maj 2005 00:39#4

Nu börjar saker och ting klarna lite... :=

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>:hover-test</title>
<style type="text/css">
* {margin:0; padding:0;}
html, body {
behavior:url("csshover.htc");
}

body{margin:100px 0 0 0;padding:0;
}

#container {
width: 750px;
margin:0 auto;
background: #ccc;
}

#meny01, #meny02, #meny03, #meny04, #meny05 {width:150px; height:30px; background:yellow;float:left;text-align:center;line-height:30px;}

#meny01_over {width:750px; height:100px; margin:-130px 0 0 0;}

#meny01 #meny01_over { display: none; }
#meny01:hover #meny01_over { display: block; background:red; }

#meny02_over {width:750px; height:100px; margin:-130px 0 0 -150px;}

#meny02 #meny02_over { display: none; }
#meny02:hover #meny02_over { display: block; background:orange; }

#meny03_over {width:750px; height:100px; margin:-130px 0 0 -300px;}

#meny03 #meny03_over { display: none; }
#meny03:hover #meny03_over { display: block; background:purple; }

#meny04_over {width:750px; height:100px; margin:-130px 0 0 -450px;}

#meny04 #meny04_over { display: none; }
#meny04:hover #meny04_over { display: block; background:black; }

#meny05_over {width:750px; height:100px; margin:-130px 0 0 -600px;}

#meny05 #meny05_over { display: none; }
#meny05:hover #meny05_over { display: block; background:silver; }

 </style>
</head>

<body>
<div id="container">
	
<div id="meny01">
<a href="#">div 1</a>
	<div id="meny01_over"></div>
</div>

<div id="meny02">
<a href="#">div 2</a>
	<div id="meny02_over"></div>
</div>

<div id="meny03">
<a href="#">div 3</a>
	<div id="meny03_over"></div>
</div>

<div id="meny04">
<a href="#">div 4</a>
	<div id="meny04_over"></div>
</div>

<div id="meny05">
<a href="#">div 5</a>
	<div id="meny05_over"></div>
</div>
<br style="clear:both;" />
</div>
	</body>
</html>

Detta verkar funkar i Firefox och safari. Med .htc-filen fungerar hovern även i MSIE även om denna browser kalkylerar bredden på elementet fel (pga. margins)

Hjälp gärna till att utveckla detta vansinne ytterligare ;)