tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
3048
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 14.03.05 13:41 #1
    nitrobesim nitrobesim ist offline Mitglied Gold
    Registriert seit
    Aug 2003
    Ort
    Berlin
    Beiträge
    230
    Hi.
    Ich habe auf 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?
     
  2. 14.03.05 14:30 #2
    Avatar von redlama
    redlama redlama ist offline
    Registriert seit
    Jun 2004
    Ort
    Stuttgart (BW)
    Beiträge
    1.746
    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
     
    Wissen ist Macht! Nichts wissen macht auch nichts, ...
    www.redlama.org
  3. 14.03.05 15:45 #3
    nitrobesim nitrobesim ist offline Mitglied Gold
    Registriert seit
    Aug 2003
    Ort
    Berlin
    Beiträge
    230
    Probier es mal mit diesem Abschnitt. Der war vorhin noch die neuste news
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Text Hover Effekt?-hier.jpg  
     
  4. 14.03.05 16:03 #4
    Avatar von redlama
    redlama redlama ist offline
    Registriert seit
    Jun 2004
    Ort
    Stuttgart (BW)
    Beiträge
    1.746
    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
     
    Wissen ist Macht! Nichts wissen macht auch nichts, ...
    www.redlama.org
  5. 14.03.05 17:06 #5
    nitrobesim nitrobesim ist offline Mitglied Gold
    Registriert seit
    Aug 2003
    Ort
    Berlin
    Beiträge
    230
    wenn man aber draufklickt, dann öffnet sich keine neue Seite.
    Also kanns ja nicht wirklich ein Link sein, oder?
     
  6. 14.03.05 17:32 #6
    Maik Tutorials.de Gastzugang
    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 :
    1
2
3
4
5
6
7
8
9
10
11

    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 :
    1

    <p class="normal" onmouseover="[B]this.className='hover'[/B]" onmouseout="[B]this.className='normal'[/B]">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.
    Geändert von Maik (14.03.05 um 17:34 Uhr)
     
  7. 14.03.05 17:41 #7
    Avatar von Gumbo
    Gumbo Gumbo ist offline
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    […] 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:
    HTML-Code:
    <!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>
     
« Tool für Verknüpfungs überprüfung? | Problem mit dem MSInternet Explorer bei Rss-feeds »

Ähnliche Themen

  1. hover-effekt
    Von Headymaster im Forum CSS
    Antworten: 8
    Letzter Beitrag: 28.11.06, 18:22
  2. hover-Effekt verschwindet
    Von MSinistar im Forum CSS
    Antworten: 6
    Letzter Beitrag: 20.03.06, 11:49
  3. hover Effekt
    Von LoMo im Forum CSS
    Antworten: 7
    Letzter Beitrag: 15.04.05, 08:26
  4. Hover Effekt
    Von BenschM@ster im Forum CSS
    Antworten: 6
    Letzter Beitrag: 19.07.03, 19:48
  5. css und hover effekt.....
    Von StupendousMan im Forum CSS
    Antworten: 3
    Letzter Beitrag: 04.02.02, 09:47