Spezieller Mouse-Over Effekt bei Links

[Janos Burghardt]

Hallo SelfHTML-Community!

Hab jetzt mehrere Webdesign-Ressourcen durchwühlt (SelfHTML, DrWeb etc.) aber konnte diesen Mouse-Over Effekt einfach nicht entdecken: bei Laut.de wird die Hintergrundfarbe der Links beim rüberfahren geändert.

Ich finde diesen Effekt sehr schön. Kann mir jemand helfen?

Viele Grüße, Janos Burghardt

-->
www.yaez.de / Jugendmagazin
www.juangelman.org / Politische Kampagne
www.janosb.de / Portfolio

[Orlando]

Hi Janos,

Hab jetzt mehrere Webdesign-Ressourcen durchwühlt (SelfHTML, DrWeb etc.) aber konnte diesen Mouse-Over Effekt einfach nicht entdecken: bei Laut.de wird die Hintergrundfarbe der Links beim rüberfahren geändert.

relevant ist hier die Definition von :hover bei den Links, wobei die Hintergrundfarbe geändert wird:

http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus

LG Orlando

[Janos Burghardt]

relevant ist hier die Definition von :hover bei den Links, wobei die Hintergrundfarbe geändert wird:

http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus

LG Orlando

Vielen Dank für die rasche Antwort! Ich arbeite schon länger mit ausgelagerten CSS-Dateien für die Schriftformatierung und deswegen hab ich dieses Posting auch unter "CSS" gepostet (muss ja, wie du gesagt hast, mit dieser Sprache realisierbar sein). Ich dachte die Lösung wäre, die "overline" dicker als das eigentlich Wort zu machen, so müsste ja eigentlich das Wort einen Hintergrund haben. Klappt aber auch nicht.

[Orlando]

Hi,

Vielen Dank für die rasche Antwort! Ich arbeite schon länger mit ausgelagerten CSS-Dateien für die Schriftformatierung und deswegen hab ich dieses Posting auch unter "CSS" gepostet

das ist auch vollkommen korrekt.

Ich dachte die Lösung wäre, die "overline" dicker als das eigentlich Wort zu machen,

overline/underline kannst du nicht verändern, das ließe sich mit einem Rahmen oben und unten realisieren. Der wird aber außen um das Element gelegt.

so müsste ja eigentlich das Wort einen Hintergrund haben. Klappt aber auch nicht.

Du benötigst dafür "background-color".

http://selfhtml/css/eigenschaften/hintergrund.htm#background_color

LG Orlando

[PeterK]

Hi

Und wie haben die das bei dem A-Z&-9 Index gemacht??? Dass die ganze tabellenzelle farbig wird?

PeterK

[Orlando]

Hi Peter,

Und wie haben die das bei dem A-Z&-9 Index gemacht??? Dass die ganze tabellenzelle farbig wird?

steht doch alles im Quelltext:

HTML:

<td onmouseout="tabelle_raus(this);" onmouseover="tabelle_drueber(this);">
  <a href="..." class="...">A</a>
 </td>

Javascript:

function tabelle_drueber(quelle) {
 quelle.style.cursor = 'hand';
 quelle.bgColor = hinteraktiv;
 quelle.children.tags('A')[0].style.color = textaktiv;
}

function tabelle_raus(quelle) {
 quelle.style.cursor = 'hand';
 quelle.bgColor = hinternormal;
 quelle.children.tags('A')[0].style.color = textnormal;
}

Einfacher ist folgende Methode:

<td onmouseover="this.bgColor='blue'" onmouseout="this.bgColor='white'"> </td>

LG Orlando

[Jan L.]

Hallo,

Hab jetzt mehrere Webdesign-Ressourcen durchwühlt (SelfHTML, DrWeb etc.) aber konnte diesen Mouse-Over Effekt einfach nicht entdecken: bei Laut.de wird die Hintergrundfarbe der Links beim rüberfahren geändert.

a { color: #000000; background: #ffffff; }
a:hover {color: #ffffff; background: #000000; }

gar nicht so schwer, oder? ;-)

Gruß, Jan