mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 16:35 Benutzername: Passwort: Auto-Login

Thema: HTML/CSS hover Effekt erstellen ? :/ vom 22.04.2015


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> HTML/CSS hover Effekt erstellen ? :/
Autor Nachricht
stianfx
Threadersteller

Dabei seit: 17.04.2015
Ort: Frankfurt am Main
Alter: -
Geschlecht: Männlich
Verfasst Mi 22.04.2015 09:13
Titel

HTML/CSS hover Effekt erstellen ? :/

Antworten mit Zitat Zum Seitenanfang

Guten morgen,

ich muss für den HTML Unterricht in der Berufsschule eine Website erstellen.
Jetzt habe ich eine frage bezüglich des hover Effektes.

Hier mein Code:
<div id="startseite" onclick="location.href='index.html';" style="cursor: pointer";>Startseite</div>
<div id="ddr" onclick="location.href='index.html';" style="cursor: pointer";>DDR</div>
<div id="mauer" onclick="location.href='index.html';" style="cursor: pointer";>Mauer</div>
<div id="mauerfall" onclick="location.href='index.html';" style="cursor: pointer";>Mauerfall</div>
<div id="einheit" onclick="location.href='index.html';" style="cursor: pointer";>Einheit</div>

Beispiel

Hier seht ihr wie es aussehen soll.

Nun zu der Frage wie bekomme ich einen hover Effekt hin mit diesem kleinen Dreieick unter jeden einzelnen Menüpunkt ?

Liebe grüße
stianfx


Zuletzt bearbeitet von stianfx am Mi 22.04.2015 09:14, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
JanG

Dabei seit: 13.10.2002
Ort: Köln/Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst Mi 22.04.2015 15:05
Titel

Antworten mit Zitat Zum Seitenanfang

Erstmal machst Du die ganze DIV-Suppe weg. * Wo bin ich? *

Hier mal ein kleines Muster, was man auch noch schöner machen könnte,
aber hier sollte es reichen, um dir zu zeigen, das man diese Div-Suppe nicht braucht:

https://jsfiddle.net/hwr7uohn/2/

Dann brauchst Du nur noch die Höhe der Links per CSS anpassen
und dort ein Hintergrundbild beim Hover einzubinden. Dieses kannst Du dann auch unten/mittig ausrichten.

Soviel erstmal dazu... und nun viel Spass beim Umbauen. *zwinker*

Peaze!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
stianfx
Threadersteller

Dabei seit: 17.04.2015
Ort: Frankfurt am Main
Alter: -
Geschlecht: Männlich
Verfasst Fr 24.04.2015 12:28
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für die schnelle Antwort.

Aber wie kann ich das Hintergrundbild (Der Pfeil) dann alleine verschieben ohne das sich der Text mit verschiebt ? *Huch*

Liebe Grüße
stianfx
  View user's profile Private Nachricht senden
JanG

Dabei seit: 13.10.2002
Ort: Köln/Düsseldorf
Alter: -
Geschlecht: Männlich
Verfasst Fr 24.04.2015 14:25
Titel

Antworten mit Zitat Zum Seitenanfang

Das Bild ist als Hintergrundbild im Link. In JEDEM Link und wird dann bei hover sichtbar.
Du musst nur jeden Link höher machen, damit der Pfeil unten ist.

Edit:
Hab mal das Muster umgebaut:
https://jsfiddle.net/hwr7uohn/3/

Hoffe das reicht dir als Muster... grafik usw. musst Du schon selber anpassen.

Peaze!


Zuletzt bearbeitet von JanG am Fr 24.04.2015 14:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS Hover Effekt im IE
a:hover effekt
hover-effekt bei text?
Problem mit CSS Hover Effekt
Hover Effekt bei Thumbnails
Flash CS3 - hover Effekt
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.