當鼠標懸停在導航欄下方的線條

我搜索了很多關於這個並找不到的東西，我怎麼能在這裏做一些類似於導航欄的東西，當你將它懸停在它上面時，它會出現一個加載條。 - 例如：http://www.thecrewgaming.com/ 是否有可能只與CSS或JavaScript是需要和如何？謝謝！當鼠標懸停在導航欄下方的線條

我想這

li:hover { 
    background-color: rgba(255, 245, 255, 0.2); 
    border-bottom-color: #abcdef; 
} 
li { 
    font-family: 'Poppins', sans-serif; 
    font-weight: bold; 
    color: #F5F5F5; 
    font-size: 0.8889em; 
    text-decoration: none; 
    font-weight: normal; 
    text-transform: uppercase; 
    border-bottom: 3px solid transparent; 
    padding-bottom: 0.125em;`` 
    transition: border-bottom-color 50ms linear 0s; 
}

但似乎作爲一個正常的線，而不是像在上面鏈接的頁面載入列。

來源

2016-09-14 Mehdi Loukili

嗨邁赫迪 - 看看下面的答案，將其標記爲一個答案，接受或提供某種反饋，以便我們可以進一步幫助您！ – Frits

@Frits已經標記，問題解決！ –

這是相當簡單的。

您在::after僞選擇器上使用position:absolute;屬性。

見小提琴和下面的代碼：

https://jsfiddle.net/cuv6bxs5/

li { 
 
    font-family: 'Poppins', sans-serif; 
 
    font-weight: bold; 
 
    color: red; 
 
    background-color: #404040; 
 
    float: left; 
 
    position: relative; 
 
    padding: 10px 20px; 
 
    overflow: hidden; 
 
} 
 

 
li::after { 
 
    background-color: red; 
 
    content: ""; 
 
    width: 0; 
 
    height: 3px; 
 
    left: 0; 
 
    bottom: 0; 
 
    transition: width 0.35s ease 0s; 
 
    position: absolute; 
 
} 
 

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

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<ul> 
 
    <li>ONE</li> 
 
    <li>TWO</li> 
 
    <li>THREE</li> 
 
    <li>FOUR</li> 
 
</ul>

來源

2016-09-14 16:38:36 Frits

如果你願意，我在這裏添加了一個更新的小提琴的背景轉換：https://jsfiddle.net/cuv6bxs5/1/ – Frits

謝謝，它比我想象的更直接，我編輯了一些css，它的工作完美正如我想要的那樣。 –

@MehdiLoukili完美 - 很高興它的工作！ :) – Frits

有幾種方法可以做到這一點。

他們使用:after僞選擇器和transition進行了動畫。

header .menu_links a { 
 
    display: inline-block; 
 
    font-weight: 600; 
 
    font-size: 14px; 
 
    height: 50px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    transition: .25s ease all; 
 
    background: gray; 
 
    text-decoration: none; 
 
    line-height: 45px; 
 
} 
 
header .menu_links a:after { 
 
    content: " "; 
 
    position: absolute; 
 
    display: block; 
 
    bottom: 0; 
 
    left: -100%; 
 
    height: 5px; 
 
    width: 100%; 
 
    background: #dd0034; 
 
    transition: .5s ease all; 
 
} 
 
header .menu_links a:hover:after { 
 
    left: 0; 
 
}

<header> 
 
    <div class="menu_links"> 
 
    <a href="#">Link A</a> 
 
    <a href="#">Link B</a> 
 
    </div> 
 
</header>

來源

2016-09-14 16:37:48 Dekel

不錯的答案，我看到你去了溢出路線，我走的寬度路線 - 雖然你打了我一分鐘左右，所以我認爲+1 :) – Frits

我認爲它甚至不到一分鐘:)你有+我也是1。 – Dekel

當鼠標懸停在導航欄下方的線條

回答

相關問題