鏈接顯示元素：懸停之前

我想在導航菜單上重現對this page所做的效果。懸停時，每條鏈接下會出現一條細線。鏈接顯示元素：懸停之前

這是我已經完成的代碼，但鏈接從未出現在懸停上。

HTML：

<body> 
     <div id="header-container"> 
      <nav class="wrap header-container"> 
       <ul class="header-container_taxonomy floatleft"> 
        <li><a href="http://www.numerama.com/tech/" class="">Tech</a></li> 
        <li><a href="http://www.numerama.com/politique/" class="">Politique</a></li> 
        <li><a href="http://www.numerama.com/pop-culture/" class="">Pop culture</a></li> 
        <li><a href="http://www.numerama.com/business/" class="">Business</a></li> 
        <li><a href="http://www.numerama.com/sciences/" class="">Sciences</a></li> 
        <div class="clearfix"></div> 
       </ul> 
      </nav> 
     </div> 
    </body>

CSS：

@font-face{ 
    font-family:'FuturaLT'; 
    src:url("futuraLT.ttf"); 
} 

body { 
    background-color: #eee; 
    font-family: "Arial"; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font-weight: normal; 
    vertical-align: baseline; 
} 

a { 
    margin: 0; 
    padding: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    text-decoration: none; 
} 

a { 
    color: inherit; 
    cursor: pointer; 
} 

ul { 
    list-style: none; 
} 

#header-container { 
    height: 50px; 
    background: #e9573f; 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    width: 100%; 
    z-index: 50; 
    position: relative; 
} 

.header-container { 
    position: relative; 
    height: 50px; 
} 

.wrap { 
    max-width: 1000px; 
    margin-left: auto; 
/*  margin-right: auto; */ 
} 

*, *:before, *:after { 
    outline: none; 
    box-sizing: inherit; 
} 

.header-container_taxonomy { 
    font-size: 13px; 
    float: left; 
    text-align: center; 
    background: #d34e39; 
    width: calc(100% - 400px); 
    font-weight: normal; 
    vertical-align: baseline; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    height: 50px; 
} 

.header-container_taxonomy a:before, #sticky-nav .sticky-nav-taxonomy a:before, .header-container_taxonomy p:before, #sticky-nav .sticky-nav-taxonomy p:before { 
    -ms-transition-property: all; 
    -webkit-transition-property: all; 
    -moz-transition-property: all; 
    -ms-transition-duration: 0.2s; 
    -webkit-transition-duration: 0.2s; 
    -moz-transition-duration: 0.2s; 
    -ms-transition-timing-function: linear; 
    -webkit-transition-timing-function: linear; 
    -moz-transition-timing-function: linear; 
    -ms-transition-delay: 0s; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    content: ""; 
    display: block; 
    height: 2px; 
    background: #f7f7f7; 
    padding: 0; 
    top: 48px; 
    position: absolute; 
    width: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

.header-container_taxonomy li { 
    display: inline-block; 
    margin: 0 5px; 
} 

.header-container li a:not([class^="icon-"]) { 
    display: block; 
    padding: 0 10px; 
    line-height: 50px; 
    color: #f7f7f7; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    position: relative; 
    font-size: 100%; 
    font-family: "FuturaLT"; 
    -webkit-font-smoothing: antialiased; 
}

https://jsfiddle.net/m84x4hdd/

來源

2015-10-18 wawanopoulos

。在你的代碼中沒有懸停，所以我只是把：

.header-container li a:hover:before { 
    width: 100%; 
}

https://jsfiddle.net/iagomelanias/m84x4hdd/2/

你也可以這樣做：

.header-container li:hover a:before { 
    width: 100%; 
}

相同的結果。

來源

2015-10-18 07:43:09

謝謝，它現在工作正常 – wawanopoulos

鏈接顯示元素：懸停之前

回答

相關問題