元素底部的悬停状态

2024-05-21 • 问答

我目前正在开发样式指南，导航的悬浮状态使我有些头疼，但是我敢肯定，可以很容易地解决它，所以我只想问问是否有人有想法。

我的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,#fff);
    background-size: 100% 3px,auto;
    background-repeat: no-repeat;
    background-position: bottom;
}

这里有一支笔可以使它更直观： https://codepen.io/dbljn/pen/abbMdVE

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

您有个主意吗？非常感谢！

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

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

尝试将.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;
}

这是假设字体大小是固定的。

元素底部的悬停状态

xiaomaxiaofeng 回答：元素底部的悬停状态

大家都在问