自定義懸停和ul / li元素？

Question

我是新來的，所以請告訴我我是用代碼還是文本編寫了錯誤的東西。

這是我當前用於頁面的代碼。 是的，我知道它簡短而可怕，但是我仍在學習HTML / CSS。 如果在頁面上運行該導航欄，則不會在導航欄按鈕上看到任何懸停事件，並且對徽標的某些擺弄會表明實際的導航欄是一個大欄。 （寬度：100％？）

我只是想知道，我怎么會去上懸停，這只是稍微有，像這樣創建：（徘徊在左邊，而不是徘徊在右邊） 哈弗展示

我不一定需要使用當前的設置或確切的設置，但是我想解釋一下如何實現。 （我從中獲取的網站上的文字變藍了，而底部的欄上有幻燈片動畫，但是我不希望能夠做到這一點）

我還想知道如何將徽標與其他li元素放在同一條形上，然后將徽標+ li元素（整個條形）的長度居中。 （這與將li元素居中並在左側保留徽標相反）。此外，導航欄上方有一個彩色的粗條，但不低於其邊緣（如邊距），並且導航欄也較粗上圖描繪得很好。

多謝您的協助！

孝ao

Answer 1

因此，對於懸停顏色，您可以執行以下操作：

li:hover {
    color: blue;
    border-bottom: 3px solid blue;
}

要添加更多的動畫，您可能需要執行以下操作：

    li {
        display: inline-block;
        vertical-align: middle;
    }
    li a:hover {
        color: blue;
    }

    li a:after {
        margin: 0 auto;
        width: 0px;
        height: 3px;
        display: block;
        content: "";
        background-color: blue;
        transition: width 0.5s linear;
    }

    li a:hover:after {
        width: 100%;
    }

    li img {
       padding: 14px 16px;
    }

http://plnkr.co/edit/GrxqcRjoMa7aWjHvnBhA

基本上，您是在創建一個psuedo元素：之后具有寬度的動畫。 當您將鼠標懸停在li元素上時，psuedo元素將增長到寬度的100％，就像下划線一樣。

要使圖像與其他元素內嵌，請刪除您的位置：#logo的絕對樣式