CSS HTML] Hover

[som3]

Hallo.
Ich arbeite gerade an der Website von meinem Clan.
Ich versuche gerade einen Hover Effect zu erstellen.
(Seite: http://optic.skyroad.me/backup/adhs/index.php )

Da ich leider kaum Ahnung habe weiß ich nicht wie ich den effect erstellen soll.
Ich bin für jede Hilfen dankbar

 

[Picus]

Mehr Infos wären nicht schlecht
Wo soll der Hover-Effekt denn hin?

PS: Den Code brauchst du nicht hier posten. Kann jeder selbst auslesen^^

 

[som3]

Ehm naja ins Menu
Also wenn ich mit der Maus zb über home gehe soll home.png durch homeover.png ersetzt werden oder so

 

[faltermayer]

Was willst du denn genau machen?
Schonmal nach dem eigentlichen Syntax gegooglt?

selektor:hover {
Styling
}

 

[Sneazel]

http://www.ohne-css.gehts-gar.net/0026.php
das sollte das richtige für dich sein
Google 1. Fund unter hover effekt grafiken

 

[Picus]

Les mal das hier: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

PS: Suche benutzen https://www.computerbase.de/forum/threads/html-bei-hover-onmouseover-bild-tauschen.437706/

 

[som3]

Oh Sorry
habe ich jetzt in der eile ganz vergessen^^
Aber danke an euch alle

 

[Picus]

PS: Finde die OpticRevolution Videos gar nicht ma so übel. Aber CrossFire ist ne Peinlichkeit

 

[som3]

Hmm
Also habs jetzt so gemacht:http://www.ohne-css.gehts-gar.net/0026.php
allerdings etwas geändert.
Aber da stimmt was nicht


PS:Ja, crossfire muss aber sein weil einer vom Channel Top 10 ESL Crossfire ist.
Deswegen editirt der nur das : /
aber naja

 

[Kausalat]

Zu aller erst solltest du keinen HTML-5-Quellcode ("nav", "header", "section") mit einer XHTML-Deklarierung vermischen.

Bezüglich des Hover-Effektes finden sich so einige gute Anleitungen im Netz. Hier einige davon.

Ich würde vorschlagen, das Menü folgendermaßen aufzubauen:

<ul id="menu">
<li id="startseite"><a href="#"><span>Startseite</span></a></li>
<li id="etwas-anderes"><a href="#"><span>Etwas anderes</span></a></li>
[...]
</ul>

Das <span>-Element umschließt die Menüpunkte in Textform, die nicht angezeigt werden sollen.
In der CSS-Datei hieße das:

 #menu span { display: none; }

Wie du siehst, bekommt jeder Menüpunkt eine separate ID, z. B. "etwas-anderes".
Diese ID machen wir uns zu Nutze, indem wir für jede ID eine separate Grafik mit dem Textzug in der Wunschschriftart festlegen.

CSS:

#menu #etwas-anderes a { display: block; width: [COLOR="Blue"]XX[/COLOR]px; height:[COLOR="Blue"] YY[/COLOR]px; background: url(etwas-anderes.png) no-repeat; }

Für den Hover-Effekt bräuchten wir nur noch die folgende Anweisung:

CSS:

#menu #etwas-anderes a:hover { background: url(etwas-anderes-hover.png); }

Die beiden letzten CSS-Codezeilen musst du dann nur noch für jeden einzelnen Menüpunkt kopieren und entsprechend anpassen (vor allem die Breite und die Grafik).


Für den Anfang wäre das eine vergleichsweise "saubere" und semantische Lösung. Es ginge natürlich auch etwas komplexer mit nur einer Grafikdatei, aber wir belassen es einmal beim Einfacheren .

 

[Picus]

Ja und jetzt ist die Navi ganz weg

Mein Vorschlag

.navi{
background-image: url("bild1.png");
}
 
.navi:hover{
background-image: url("bild2.png");
}

 

[som3]

so die navi ist wieder da
Aber die ist jetzt untereinander und nicht nebeneinander

Zu aller erst solltest du keinen HTML-5-Quellcode ("nav", "header", "section") mit einer XHTML-Deklarierung vermischen.

 

[Picus]

Wie wär's mit...

.home-link{
float:right;
}

und für die anderen Navi Punkte natürlich auch (wie ich grade sehe )

Edit: bzw. float:left;

 

[Kausalat]

Hier noch einmal eine ausführlichere Anleitung. Den Teil mit der Grafikerstellung kannst du überspringen.