• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Hovereffekt mit Zellen?

Dini

New member
Hi,

eine Frage!

Ich möchte das sich in meinem Forum die Zellenfarbe ändert wenn ein User mit seiner Maus darüber fährt, also ein Hover-Effekt.

Mit den Links ist das kein Prob. Geht das aber auch mit den Zellen im Forum?

Läßt sich das per css machen? Und wenn wie?



Dank und Gruß Dini ;)
 
Moin!

Beispiel:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<style type="text/css">
<!--
td{
background-color: red;
}
td:hover{
background-color: yellow;
}
-->
</style>
</head>
<body>
<table border="1">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
</body>
</html>
Leider ist IE zu dumm dazu (da geht das nur mit Javascript).

Ahoi - Pit
 
Ok, vielen Dank Euch beiden!

Obgleich ich gestehen muß, das ich nicht weiß wie nun der richtige JS aussehen muß und wo ich ihn im Board unterbringen muß um diesen Effekt zu erzielen... :D

Viele Grüße und Dank, Dini ;)
 
Macht ja nichts, dafür kann man sich bei der URL den Quellcode anzeigen lassen und diesen mal studieren. :)
 
Hi womstar, :)

hab ich auch gemacht und studiert! ;)

Dennoch, das ist für mich einfach (noch) ein paar Stufen zu hoch, obgleich ich da schon einiges ahne!

Ich bin 42 J. und wußte vor 9 Monaten nicht mal was ein Server ist! Jetzt bastle ich erfolgreich eigene Styles fürs WBB und schlage mich (auch schon recht erfolgreich), mit HTLM rum...hihihi... :D

Macht aber alles nichts.....ich habe Zeit und das werde ich auch noch lernen...hahaha...und ich lese hier und woanders unermüdlich und versuche es dann in meinem Test-Board umzusetzen bis es klappt, das macht nämlich echt Spaß!

Vielen Dank an Dich, Dini ;)
 
Hi!

Wenn Du die css-Variante bevorzugst (danach hattest Du ja gefragt) und es Dir reicht, wenn moderne Browser berücksichtigt werden, kannst Du alternativ auch so was machen, wie ich gepostet hatte und IE überlisten. Dazu den Text auf dieser Seite kopieren, in einem Texteditor in eine neue Datei einfügen und diese (z. B. als csshover.htc) speichern. In Deinem Style-Sheet brauchst Du dann noch:

body { behavior:url("csshover.htc"); }

Dann werden mittels JScript Deine css-hover-Geschichten für IE "übersetzt", in den anderen Browsern wärst Du aber JS-unabhängig.

Gruß - Pit

Edit - sehe gerade, daß der Link in Opera nix taugt. Sollte also kein Text auftauchen, dies ist der code:
Code:
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
 *	Pseudos - V1.30.050121 - hover & active
 *	---------------------------------------------
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	(c) 2005 - Peter Nederlof
 *
 *	Credits  - Arnoud Berendsen 
 *	         - Martin Reurings
 *           - Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	---------------------------------------------
 */

var currentSheet, doc = window.document, activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:hover.*$/, '');
		var elements = getElementsBySelect(affected);

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	node.attachEvent(events.on,
		function() { node.className += ' ' + className; });
	node.attachEvent(events.off,
		function() { node.className = 
			node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
					classname[1] + '\\b').exec(node.className)))) continue;
				nodes[nodes.length] = node;
			}
		}	return nodes;
	}
</script>
 
Zuletzt bearbeitet:
Hmmm, daß hört sich wirklich interessant und nachvollziehbar an!

Werde mir das als nächstes vornehmen!

ZZ. bastel ich eben an einem U-Boot-Style und da wäre dieser Effekt nämlich sehr nützlich!

Danke pit-r :cool:

Gruß Dini ;)
 
Gern geschehen. :D

Wenn's Probleme gibt einfach nochmal melden.

Gruß - Pit
 
Zurück
Oben