Text Hover Effekt?

Status
Nicht offen für weitere Antworten.
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
 
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
 
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:
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:
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.
 
Zuletzt bearbeitet von einem Moderator:
[…] der Teil, der sich ändert, in ein <a> eingeschlossen ist, also einen Link darstellt.
Zum Vergrößern anklicken....
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:
HTML: 
<!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>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück