# Text Hover Effekt?



## nitrobesim (14. März 2005)

Hi.
Ich habe auf http://www.mariahdaily.com entdeckt im neusten artikel, dass der text grau ist.
Aber wenn man mit dem Cursor über ihn fährt, dann wird er schwarz. Wie funktioniert dieser Hovereffekt?


----------



## redlama (14. März 2005)

Wo ändert sich da der Text?
Ich habe mir die Seite mal angeschaut und konnte den von Dir beschriebenen Effekt nirgends entdecken!
Also wo ist das da?
Was den Hover-Effekt als solches betrifft, mit Verweisen kann man das machen, siehe hier.

redlama


----------



## nitrobesim (14. März 2005)

Probier es mal mit diesem Abschnitt. Der war vorhin noch die neuste news


----------



## redlama (14. März 2005)

Ah, ...
Mit dem IE geht es bei mir schonmal nicht!
Hab's mit dem Firefox probiert, da geht's.
Wenn Du da mal in den Quelltext schaust, dann kannst Du sehen, dass der Teil, der sich ändert, in ein <a> eingeschlossen ist, also einen Link darstellt. Und der wurde mit dem Hover-Effekt (siehe Link oben) verändert.
Jetzt weiß ich aber nicht, ob das gewollt ist, oder nicht. Denn wenn man sich die Seite mit dem Firefox anschaut, dann sieht die dort absolut verzerrt aus!

redlama


----------



## nitrobesim (14. März 2005)

wenn man aber draufklickt, dann öffnet sich keine neue Seite.
Also kanns ja nicht wirklich ein Link sein, oder?


----------



## Maik (14. März 2005)

Der :hover -Effekt funktioniert im IE nicht, weil dem <a>-TAG das Attribut *href="#"* fehlt. Ergo: dieser Abschnitt (Textabsatz) dient nicht als Link, dennoch soll der darin eingebettete Text animiert werden, wenn er mit der Maus überfahren wird.

Es gibt eine alternative und browserübergreifende Technik, mit der sich (alle) HTML-Elemente 'dynamisch' gestalten lassen:

CSS-Code:

```
p.normal /* Textabsatz normal-Formatierungen */
{
color: #8f8f8f;
border: 1px solid #dfdfdf;
}

p.hover /* Textabsatz hover-Formatierungen  */
{
color: #000000;
border: 1px solid #dfdfdf;
}
```
 Anmerkung: Für die beiden CSS-Klassen *.normal* und *.hover* können auch andere bzw. weitere CSS-Eigenschaften gewählt werden.

HTML-Code:

```
<p class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">Textabsatz</p>
```
 Mit Hilfe der Event-Handler *onmouseover=* / *onmouseout=* und der Script-Anweisung *this.className='[Klassen-Name]'* wird beim Überfahren des HTML-Elements die 'voreingestellte' CSS-Klasse *.normal* gegen *.hover* getauscht.


----------



## Gumbo (14. März 2005)

> […] der Teil, der sich ändert, in ein <a> eingeschlossen ist, also einen Link darstellt.


Das stimmt nicht ganz, denn das Anker-Element wird eigentlich erst zu einem Verweis, wenn es ein nicht leeres href-Attribute besitzt.
Korrekt wäre demnach auch nur folgende CSS-Code, um Verweise als solche hervorzuheben:
	
	
	



```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<style type="text/css">
	/*<![CDATA[*/
	a {
		background:	#ffc;
	}
	a:link,
	a:visited {
		background:	#eee;
	}
	a:hover {
		background:	#c33;
	}
	a:link:hover,
	a:visited:hover {
		background:	#3c3;
	}
	/*]]>*/
	</style>
</head>


<body>
	<p><a name="ankername1" id="ankername1">Anker</a></p>
	<p><a href="http://example.org/" name="ankername2" id="ankername2">Anker mit Verweis</a></p>
	<p><a href="http://example.org/">Verweis</a></p>
</body>
</html>
```


----------

