元素底部的悬停状态

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

尝试将 .components__navItem a 替换为：

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

虽然这是假设字体大小固定。

Answer 2

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

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

移除 ul 元素的边距和下方选择器的 background-image 以便 nav 元素将分布在 li 元素上，并且将是动态的

.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>

元素底部的悬停状态

Hover-State at bottom of element

html

css

hover