• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bei a:hover im Menu alle Elemente ansprechen?

L

lddd

Neues Mitglied
Hallo,

kurze Frage. Bei meinem horizontalen ul li menu habe ich Trennzeichen mit border-right: 1px solid #333 gesetzt.

Nun möchte Ich erreichen, dass nicht nur der Border vom jeweiligen Element über das gehovert wird verschwindet sondern auch der Border vom Element davor.

Geht das irgendwie und wenn ja wie? Es sieht sonst irgendwie nicht so klassse aus wenn rechts der Border verschwindet beim RollOver und links beim Element zuvor der Strich rechts stehen bleibt...

danke vorab schon mal für Hilfe
 
Mit CSS3-Selektoren kannst du da eventuell was basteln.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>

        <style type="text/css">
nav li {
    float: left;
    list-style: none;
}

nav li a {
    display: block;
    text-align: center;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background: #eee;
    border-left: 2px solid #ccc;
}

nav li:last-child a {
    border-right: 2px solid #ccc;
}

nav a:hover {
    background: #f60;
    border-left-color: #eee;
}

nav li:hover + li a {
    border-left-color: #eee;
}

        </style>
    </head>

    <body>
        <nav>
            <ul>
                <li><a href="./">item</a></li>
                <li><a href="./">item</a></li>
                <li><a href="./">item</a></li>
                <li><a href="./">item</a></li>
                <li><a href="./">item</a></li>
                <li><a href="./">item</a></li>
            </ul>
        </nav>

    </body>

</html>

- Selectors Level 3
 
Noch eine Frage dazu...

Wie kann Ich dem Border jetzt noch eine "height" geben ohne das wenn ich dem Elementen ein padding gebe der Border mit wächst? Ich würde es gerne so hinbekommen, das der Border nicht größer ist von der Höhe als der Text aber dennoch ein Padding haben damit bei a:hover der Hintergrund des Links etwas Abstand hat von allein Seiten.
 
Ich fürchte, da kommst du langsam doch in Bereiche, wo es ohne Grafiken schwierig wird. Eventuell lässt sich da noch was deichseln, wenn du span-Elemente mit fester Höhe in die a-Elemente einsetzt… Sowas habe ich nie probiert.
 
klappt so gut wie, kann mir noch einer sagen wie ich nun noch das gesetzte background image vom jeweiligen first-child wegbekomme ??

HTML: 
#footer-nav li a {
    display: block;
    text-align: center;
    background: url('../img/interface/sep.jpg') left no-repeat;
    font:normal 16px/16px Arial, Verdana, Sans-Serif;
    text-transform:uppercase;
    text-decoration:none;
    color: #353535;
    padding: 4px 10px 4px 10px;
}

#footer-nav a:hover {
    background: #353535;
    color: #fff;
}

#footer-nav li:hover + li a {
       background: #fff;
}
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben