Hinzufügen einer Zeile unter der Menü-Elemente auf hover?

Möchte ich hinzufügen, dass eine Linie auf der hover-Menü-Elemente genau wie das, was diese Seite auf Ihrer Navigations-Menü:
http://www.ovenbits.com

Ich versuche mit css, aber der übergang Effekt ist hässlich. Wie kann ich dies tun ?

Vielen Dank !

Zeigen Sie, was haben Sie versucht, in ein jsFiddle, Fragen Sie dann, was nicht funktioniert
Hinzufügen border-bottom Eigenschaft auf hover.
Gefällt Ihnen die Möglichkeit die line-on-hover funktioniert/aussieht in ovenbits.com?

InformationsquelleAutor user25808 | 2014-09-05

  1. 3

    anstatt unterstreichen verwenden Grenze unten:

    .menu a:hover { border-bottom:3px solid #fff;}

    demo hier: http://jsfiddle.net/z2uu1dj4/

    InformationsquelleAutor rahim701

  2. 0
    Use code like this:

<ul>
    <li class="topnav-link">Home</li>
    <li class="topnav-link">About Us</li>
    <li class="topnav-link">Contact Us</li>
</ul>

ul{float:left; margin:0; padding:0; list-style:none;}
.topnav-link {
    border-bottom: 2px solid transparent;
    color: #000;
    font-size: 0.8889em;
    font-weight: normal;
    padding-bottom: 0.125em;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-bottom-color 50ms linear 0s;
    float:left;
    margin:0 5px;
}
.topnav-link:hover, .topnav-link.active {
    border-bottom-color: #f00;
}

    InformationsquelleAutor user3074446

  3. 0

    Für was es Wert ist, die live-on-over-Effekt auf ovenbits.com wird realisiert durch die folgende CSS-Regel:

    .topnav-link {
    color: #F5F5F5;
    font-size: 0.8889em;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.125em;
    transition: border-bottom-color 50ms linear 0s;
}
.topnav-link:hover, .topnav-link.active {
    border-bottom-color: #FFF;
}

    HTML:

    <li class="topnav-link-item">
    <a href="/commerce" class="topnav-link">Commerce</a>
</li>

    also die untere Grenze liegt auf der a - element (link).

    Den übergang angewendet wird, um die border-color-Eigenschaft.

    InformationsquelleAutor Marc Audet

Schreibe einen Kommentar