javascript - CSS 导航链接悬停

Question

我想知道是否有任何方法可以使用 CSS 实现导航悬停的外观？我试过使用框阴影效果，但模糊效果会向两侧渗出。如图所示，我真的想要沿边缘的 chop 外观以及仅应用于底部边缘的渐变。

此外，这不需要使用 CSS 来实现； JS或者JQ都可以。

Answer 1

Here是一个 jsFiddle，它应该满足您的要求。

代码如下:

body {
    background: #e8e8e8;
}

nav {
    background: #DEC8A0;
    height: 50px;
    position: relative;
}

nav:before {
    width: 100%;
    height: 16px;
    background-image: linear-gradient( 25deg, transparent 0%, transparent 50%, #DEC8A0 50%, #DEC8A0 100% ),
                      linear-gradient( -25deg, transparent 0%, transparent 50%, #DEC8A0 50%, #DEC8A0 100% );
    background-size: 28px 16px;
    background-repeat: repeat-x;
    position: absolute;
    bottom: -16px;
    left: 0;
    display: block;
    content: "";
}

nav a {
    display: block;
    float: left;
    width: 100px;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

nav a:hover {
    box-shadow: inset 0px 4px 0px purple;
}

nav a:hover:before {
    width: 100%;
    height: 100px;
    background: linear-gradient( purple, transparent );
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
}

<nav>
    <a>About</a>
    <a>Other</a>
</nav>

这有点紧张，所以我将向您介绍我们正在做的各种事情:

为了完成有趣的剪切边框，我们使用应用于 :before 伪元素背景的渐变 nav。您可以使用任何您想要的 Angular ——-45 和 45 度将形成非常锐利的锯齿形，而低于此值的任何 Angular 都可以像我们在本例中那样形成漂亮的渐变 Angular 。

然后，要实现悬停效果:有两个组件在起作用。为了获得悬停效果的顶部，我使用了与渐变开始颜色相同的插图 box-shadow。然后，为了获得渐变，我使用了 nav a 的 :before 伪元素，它的高度大于链接本身，并且 z-index 也更低而不是 nav 元素，所以它位于下方。

最后 -- 如果您不熟悉它，我将使用 flexboxes 使导航文本垂直居中。

这一切加起来就是您(希望)正在寻找的效果!

编辑:如果您有可变宽度的链接，您只需将 nav a 的宽度设置为 auto 并在两端添加所需的填充:

nav a {
    display: block;
    float: left;
    width: auto;
    padding: 0 20px;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

请记住，在执行此操作时，您需要在 :before 伪元素上设置 left: 0，因为我们需要它粘在左侧链接:

nav a:hover:before {
    width: 100%;
    height: 100px;
    background: linear-gradient( purple, transparent );
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
}

Here是一个更新的 fiddle ，添加了所有这些内容。