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

joel_sundkvistMedlem sedan feb. 2003240 inlägg

Trådstart15 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