MouseOver auf mehrere Objekte anwenden

fink-x

fink-x

Mitglied
Hallo Leute,

ich hoffe ihr könnt mir kurz helfen. Ich möchte mit JavaScript ein OnMouseOver Effect haben und die Hintergrundfarbe ändern.
Aber er soll sich auf mehrere Objekte beziehen (div´s). Hier ein kurzer Codeschnipzel als Beispiel...

HTML: 
<html>
	<head>
		<style>
		div {
			float: left;
			padding: 3px;
			margin: 2px;
		}
		#wrapper {
			border: 1px solid black;
			width: 150px;
		}	
		#box1 {
			border: 1px solid black;
			background: silver;
		}
		#box2{
			border: 1px solid black;
			background: blue;		
		}
		#box3 {
			border: 1px solid black;
			background: green;
		}
		</style>
	</head>
	<body>
	<div id="wrapper">
		<div>
			<div id="box1">box1</div>
			<div id="box1">box1</div>
			<div id="box1">box1</div>
		</div>
		<br />
		<div>
			<div id="box2">box2</div>
			<div id="box2">box2</div>
			<div id="box2">box2</div>
		</div>
		<br />
		<div>
			<div id="box3">box3</div>
			<div id="box3">box3</div>
			<div id="box3">box3</div>
		</div>
	</div>		
	</body>
</html>

also kurz gesagt. Wenn man über ein div z.B. box3 geht soll sich bei allen anderen boxen mit id="box3" auch die Hintergrundfarbe ändern.
Ich hoffe ihr könnt mir helfen.

Danke
 
Die id in einem html-Element soll etwas einzigartiges sein. Es dürfen keine zwei Elemente die gleiche id aufweisen. In deinem Beispiel gibt es aber jeweils drei <div>s mit der gleichen id, das wird schonmal Probleme machen und ist einfach nur schlechter Stil.


Wenn du die <div>s einfach durchnummerierst (box1, box2, box3, ..., box 9) kannst du in einer for-Schleife den Startwert der Boxen und den Endwert angeben. Innerhalb der Schleife führst du dann immer

document.getElementByID('box' + zaehlvariable).style.backgroundColor='#FF0000'; // oder welche Farbe auch immer

aus und du hast, was du brauchst. Die Funktion mit der Schleife kommt dann in das onmouseover der <div>s, wo auch der Start- und Endwert als Parameter der Funktion angegeben wird.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück