Seitennavigation mit Hovereffekt

[sindyho0374]

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

.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;
}

 

[lachender_engel]

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]

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]

Ändere Deinen Selektor von .hoverlink zu :hover. Für .hauptlink reicht a. Und die redundanten Angaben kannst Du dann auch weglassen.

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.