Antworten auf deine Fragen:
Neues Thema erstellen

Seitennavigation mit Hovereffekt

sindyho0374

Nicht mehr ganz neu hier

Hallo Freunde.
Ich könnte mal wieder eure Hilfe brauchen.
Ich habe für eine Seite eine simple Navigation erstellt und möchte gerne für die jeweiligen Links einen Hover-Effekt hinzufügen nur komme ich hier nicht so recht weiter.
Ich habe bereits in meiner CSS Datei 2 Klassen erstellt jeweils für den Hauptlink sowie für den Hoverlink. Dies bewirkt das der angeklickte Link als Aktiv angezeigt wird.

Hier mal ein kleiner Ausschnitt aus dem Code:
PHP:
<?php $page = htmlentities($_GET['page']); ?>
<ul>
    <li><a href="index.php"<?php echo ($page == ''?' class="hauptlink"':' class="hoverlink"'); ?>>Startseite</a></li>
    <li><a href="index.php?page=ueber_uns" <?php echo ($page == 'ueber_uns'?' class="hauptlink"':' class="hoverlink"'); ?>>Wir stellen uns vor</a></li>
    <li><a href="index.php?page=angebote"<?php echo ($page == 'angebote'?' class="hauptlink"':' class="hoverlink"'); ?>>Angebote</a></li>
</ul>

Jetzt meine Frage: Wie bekomme ich es hin, dass ich beim anklicken ein Hovereffekt einstellt?

Vielen Dank im Voraus

Hier mal die Klassen:
CSS:
.hauptlink {
     font-family: 'Lato', sans-serif;
     font-size: 18px;
     font-weight: bold;
     color: #e4ddcd;
     text-decoration: underline;
     line-height: 50px;
}
.hoverlink {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    line-height: 50px;
}
 
Zuletzt bearbeitet von einem Moderator:

lachender_engel

Aktives Mitglied

Kann es sein, dass Du den Begriff "Hovereffekt" für was anderes verwendest, was Du eigentlich willst?
Hover bedeutet, dass sich ein LInk verändert wenn Du mit der Maus darüber fährst. Klicken bedeutet, Du aktivierst einen Link und rufst eine andere Seite damit auf.

Was von beidem möchtest Du jetzt?
 

sindyho0374

Nicht mehr ganz neu hier

Du hast recht, Ich verwende das so wie sagst aber das kann man ja ändern, ich möchte gerne noch den Effekt wenn man mit der Maus über den Link fährt.
 

owieortho

Aktives Mitglied

Ändere Deinen Selektor von .hoverlink zu :hover. Für .hauptlink reicht a. Und die redundanten Angaben kannst Du dann auch weglassen.
CSS:
a {
     font-family: 'Lato', sans-serif;
     font-size: 18px;
     font-weight: bold;
     color: #e4ddcd;
     text-decoration: underline;
     line-height: 50px;
}
:hover {
    color: #ff0000;
    text-decoration: none;
}
O.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben