html - 元素底部的悬停状态

Question

我目前正在开发一个风格指南，我的导航悬停状态让我有些头疼，但我很确定，它可以很容易地解决，所以我只想问问，是否有人有想法。

我的 html 看起来像这样:

<nav class='components__navigation'>
        <a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
        <ul class='components__navListTop'>
            <li class='components__navItem'><a href='#'>Design</a></li>
            <li class='components__navItem' id='active'><a href='components.html'>Components</a></li>
            <li class='components__navItem'><a href='#'>Motionguide</a></li>
        </ul>
</nav>

我的 CSS 看起来像这样:

.components__navigation {
    display: flex;
    height: 75px;
    align-items: center;
    padding-left: 50px;
    border-bottom: 4px solid #f5f5f5;
}

.components__navigation img {
    width: 250px;
    height: 40px;
    margin-right: 100px;
}

.components__navListTop {
    font-size: 14px;
    display: flex;
    list-style: none;
    padding: 0;
}

.components__navListTop a {
    color: #333;
    text-decoration: none;
    margin-right: 50px;
}

.components__navItem a {
    text-decoration: none;
    background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
    background-size: 0 3px,auto;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: background .2s linear;
}

.components__navItem a:hover {
    background-size: 100% 3px,auto;
}

#active a {
    background-image: linear-gradient(#ffda00,#ffda00),linear-gradient(#fff,#fff);
    background-size: 100% 3px,auto;
    background-repeat: no-repeat;
    background-position: bottom;
}

这是一支笔，使它更直观: https://codepen.io/dbljn/pen/abbMdVE

当前的悬停状态就在选项卡的字体下方，但我希望悬停状态位于灰色边框所在的位置。像这样:

你有想法吗？非常感谢!!

Answer 1

当元素彼此重叠时，编写相似的样式规则始终是一个好习惯。 例如，我们可以对 nav html 元素使用相同的 background-image 属性，而不是 border 属性

.components__navigation {
    display: flex;
    align-items: center;
    padding-left: 50px;
    background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}

移除 ul 元素的边距和下方选择器的 background-image ，这样 nav 元素就会在 li< 上展开/em> 元素并且将是动态的

.components__navListTop {
    font-size: 14px;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.components__navListTop a {
    color: #333;
    text-decoration: none;
}

最后为 li 元素提供背景图像和其他 CSS 规则，

.components__navItem {
    padding: 20px 0;
    margin-right: 50px;
    background-image: linear-gradient(transparent 90%,#ffda00 0);
    background-size: 0;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: background .2s linear;
}

因为你想要悬停在 li 元素上的动画，所以 :hover 伪属性应该出现在这个 li 元素上，它也是最好使用类而不是 id

.components__navItem:hover, .active {
    background-size: 100%;
}

最后把它们放在一起，

body, html {
    margin: 0;
}

.components__navigation {
    display: flex;
    align-items: center;
    padding-left: 50px;
    background-image: linear-gradient(transparent 90%, #f5f5f5 0);
}

.components__navigation img {
    width: 250px;
    height: 40px;
    margin-right: 100px;
}

.components__navListTop {
    font-size: 14px;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.components__navListTop a {
    color: #333;
    text-decoration: none;
}

.components__navItem {
    padding: 20px 0;
    margin-right: 50px;
    background-image: linear-gradient(transparent 90%,#ffda00 0);
    background-size: 0;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: background .2s linear;
}

.components__navItem:hover, .active {
    background-size: 100%;
}

<nav class='components__navigation'>
        <a href='../index.html'><img class='styleguide__logo' src='../imgs/Logo.png' alt='Logo'></a>
        <ul class='components__navListTop'>
            <li class='components__navItem active'><a href='#'>Design</a></li>
            <li class='components__navItem'><a href='components.html'>Components</a></li>
            <li class='components__navItem'><a href='#'>Motionguide</a></li>
        </ul>
    </nav>