Text Glow beim drüberfahren (auch wenn kein Link)

Status
Nicht offen für weitere Antworten.
D

DavidBaumhauer

Mitglied
Hi Leutz,
ich hatte eine Idee für meine Homepage: Wenn jemand über einen Text fährt, dann soll dieser sich anders färben, genau wie bei meinen Links. Das mit den Links weiß ich schon lange, ist ja leicht zu verstehen und zu machen. Aber mit normalem Text funktioniert das irgendwie nicht.

Ich habe es so probiert:

PHP: 
p  {
color: #ffffff;
}

p:hover {
color: #000000;
}

PHP: 
<p style="p">
Irgendein Text ...
</p>

Vielleicht kann mir jemand erklären, was genau ich falsch mache. Ich glaube, es hat etwas mit dem Hover-Befehl bei p:hover zu tun, das habe ich auch schon versucht zu ändern, jedoch ohne Erfolg.

Vielen Dank für Eure Hilfe

C ya David
 
Das Problem ist, dass du einen Browser mit lückenhafter CSS-Implementation benutzt ;) Im Mozilla u. Firefox klappt das ganze recht gut.

Abhilfe schafft da nur der Einsatz von JavaScript mit den Events onMouseOver und onMouseOut.
 
Habe auch in einem anderen Forum gelesen, dass mein gewünschter Effekt nur mit Java funktioniert. Könnte mir eventuell jemand erläutern, wie ich das dann machen soll?
 
Du bist ein Gott ;) Vielen Dank, ich habe auch gerade damit rumgespielt un onMouseOver="val.color probiert, hat aber immer gesagt, dass der Bereich undefiniert ist ;)
 
Zuletzt bearbeitet:
In deinem Fall würde ich jedoch eine Automatisierung vorschlagen:
Code: 
<script type="text/javascript">
	function init() {
		var paragraphs = document.getElementsByTagName('p');
		for(i=0; i<paragraphs.length; i++) {
			var default_color = paragraphs[i].style.color;
			paragraphs[i].onmouseover = new Function('this.style.color = "#f80"');
			paragraphs[i].onmouseout = new Function('this.style.color = "' + default_color + '"');
		}
	}
	onload = init;
</script>
 
Hm... entweder bin ich einfach zu doof, oder es funktioniert bei mir nicht. Ich habe es in eine .js-Datei eingebaut, ging aber nicht. Und wenn ich es in den Header schreibe, geht es leider nicht.
Macht aber jetzt auch nichts, das was ich wollte funktioniert prima ;)

Außerdem will ich nur fast den Ganzen Text so machen, nicht alles ;)
 
Hallo,
es geht auch ohne JavaScript. Allerdings kommt man dann um einen Link nicht herum, da der IE6 das Pseudoformat 'hover' wirklich nur beim a-Tag unterstützt.
Man kann den Link aber als Anker gestalten und mit CSS verstecken:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>hover-Text</title>
<style type="text/css">
<!--
body {color: black;}
a.blau, a.grn, a.rot {color:black; text-decoration:none; cursor:text;}
a.blau:hover {color: blue;}
a.grn:hover {color: green;}
a.rot:hover {color: red;}
-->
</style>
</head>
<body>
<p>
Das ist normaler Text,
das ist <a name="blau" href="#blau" class="blau">blauer hover-Text</a>,
das ist <a name="gruen" href="#gruen" class="grn">gr&uuml;ner hover-Text</a>,
das ist <a name="rot" href="#rot" class="rot">roter hover-Text</a><br />
und das ist ein ganz normaler Link: <a href="http://www.tutorials.de/forum42">http://www.tutorials.de/forum42</a>.<br />
Getestet mit IE6, Netscape 7.1 und Opera 7.54.
</p>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück