✔ jQuery: Übereinander liegende Boxen einzeln faden

Masaku · 27. Juni 2008

Hi, irgendwie weiß ich einfach nimmer weiter.

Die Idee sieht so aus: Oben befindet sich ein großer Balken, der je nach Hover einer der drei Boxen weiter unten einen anderen Inhalt anzeigt.
Dazu gibt es drei Boxen mit den IDs Box1, -2 und -3, die übereinander mit anfangs display:none liegen und welche beim Hover einen FadeIn/Out auslösen sollen.

Eigentlich klappt das auch. Die Opacity wird ordnungsgemäß verändert, wie ich in Firebug gesehen hab. Aber nur die Hovermeldung der ersten Box seh ich. Die von der zweiten und dritten Box nicht. Diese seh ich nur, wenn ich schnell über die erste Box fahre, sodass deren Hover-Event ausgelöst wird.

Syntaktisch scheint alles i.O. zu sein, vonner Verschachtelung auch. Mir fällt nich ein, woran's noch liegen könnte.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>


<style type="text/css">

body {
	text-align:center;
	margin:0;
}


#wrapper {
	margin:auto;
}

div {
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	width:800px;
}

#balken, #balken_1, #balken_2, #balken_2 {
	height:150px;
	padding:55px 0 0 0;
	border:1px solid #ccc;
	margin:0 0 30px 0;
}

#balken_1{
	background-color:#FFCC66;
	position:relative;
	top:-115px;
	display:none;
}

#balken_2{
	background-color:#6699FF;
	position:relative;
	top:-352px;
	display:none;
}

#balken_3 {
	background-color:#FF6666;
	position:relative;
	top:-590px;
	display:none;
}

#content div {
	height:100px;
	padding:35px 0 0 0;
	border:1px solid #ccc;
	margin:0 0 20px 0;
}

#box1 {
	background-color:#FFCC33;
}

#box2 {
	background-color:#0066CC;
}

#box3 {
	background-color:#993333;
}



</style>


<script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

/*	$("div#content div").hover(function() {
		$("div#balken_" + this.id).fadeIn(800);
		$("div#balken_" + this.id).css(zIndex="1000");
	}, function() {
		$("div#balken_" + this.id).fadeOut(800);
		$("div#balken_" + this.id).css(zIndex="0");
	}); */

	$("div#box1").hover(function() {
		$("div#balken_1").fadeIn(800);
	}, function() {
		$("div#balken_1").fadeOut(800);
	});

	$("div#box2").hover(function() {
		$("div#balken_2").fadeIn(800);
	}, function() {
		$("div#balken_2").fadeOut(800);
	});

	$("div#box3").hover(function() {
		$("div#balken_3").fadeIn(800);
	}, function() {
		$("div#balken_3").fadeOut(800);
	});

});

</script>
</head>

<body>


<div id="wrapper">
	
	<div id="balken">	
		Der Balken<br />
		Beschreibung blabla Lorem Ipsum, ihr wisst schon
		
		<div id="balken_1">
			Box 1 wurde gehovert<br />
			Bei Klick bleibt der Container aktiv, bis ein anderer angeklickt wird.
		</div>
		
		
		<div id="balken_2">
			Box 2 wurde gehovert<br />
			Bei Klick bleibt der Container aktiv, bis ein anderer angeklickt wird.
		</div>
		
		
		<div id="balken_3">
			Box 3 wurde gehovert<br />
			Bei Klick bleibt der Container aktiv, bis ein anderer angeklickt wird.
		</div>	
	</div>
	
	
	
	<div id="content">	
		<div id="box1">
			Box 1
		</div>
		
		<div id="box2">
			Box 2
		</div>
		
		<div id="box3">
			Box 3
		</div>	
	
	</div>
	


</div>
</body>
</html>

Maik · 28. Juni 2008

Hi,

verwende mal diese Regeln zur Positionierung der drei Boxen:

Code:

#wrapper {
        margin:auto;
        position:relative;
}

#balken_1, #balken_2, #balken_3 {
        position:absolute;
        top:0;
        left:0;
        display:none;
}

#balken_1{
        background-color:#FFCC66;
}

#balken_2{
        background-color:#6699FF;
}

#balken_3 {
        background-color:#FF6666;
}

Außerdem hast du in diesem Selektor anstelle der ID #balken_3 die ID #balken_2 doppelt genannt:

Code:

#balken, #balken_1, #balken_2, #balken_3 {
        height:150px;
        padding:55px 0 0 0;
        border:1px solid #ccc;
        margin:0 0 30px 0;
}

mfg Maik

Masaku · 28. Juni 2008

Das ist unglaublich. Heute beim Frühstück is mir genau das eingefallen!

Weil ich hatte letztens eine ähnliche Aufgabe und da hab ich das genau so gelöst.
Danke dir für deine Antwort!

✔ jQuery: Übereinander liegende Boxen einzeln faden

Masaku

Mitglied

Maik

Masaku

Mitglied

Neue Beiträge