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



## DavidBaumhauer (3. Oktober 2004)

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:


```
p  {
color: #ffffff;
}

p:hover {
color: #000000;
}
```


```
<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


----------



## Matthias Reitinger (3. Oktober 2004)

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.


----------



## DavidBaumhauer (3. Oktober 2004)

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?


----------



## Matthias Reitinger (3. Oktober 2004)

*Java != JavaScript*


```
<p onmouseover="this.style.color='#000000';" onmouseout="this.style.color='#ffffff';">
Foobar!
</p>
```


----------



## DavidBaumhauer (3. Oktober 2004)

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


----------



## Gumbo (3. Oktober 2004)

In deinem Fall würde ich jedoch eine Automatisierung vorschlagen:
	
	
	



```
<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>
```


----------



## DavidBaumhauer (4. Oktober 2004)

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


----------



## hela (10. Oktober 2004)

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:

```
<!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>
```


----------

