Question

我想在导航菜单上重现对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/

Answer 1

您的代码中没有悬停，所以我只想：

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

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

你也可以这样做：

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

同样的结果。

在链接下显示元素：在悬停之前

1 个答案: