Question

我想知道是否有任何方法可以实现CSS导航悬停的外观？我尝试过使用盒子阴影效果，但模糊效果会让两侧都流淌。如图所示，我真的希望沿着边缘的截止外观以及仅应用于底边的渐变。

Navigation Hover Effect

此外，这不需要用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的{{1}}伪元素的背景。你可以使用你想要的任何角度 - nav和-45度将产生非常尖锐的曲折，下面的任何东西都会像我们在这个例子中那样做出漂亮，渐进的角度。

然后，为了完成悬停效果：有两个组件在起作用。为了获得悬停效果的顶部，我使用与渐变开始颜色相同的插入45。然后，为了获得渐变，我使用box-shadow的{{1}}伪元素，其高度大于链接本身，并且还使用比:before元素更低的z-index所以它位于下方。

最后 - 如果你不熟悉它，我会使用flexbox来垂直居中导航文本。

这一切都会增加您（希望）寻找的效果！

编辑：如果您有流量宽度链接，只需将nav a的宽度设置为自动并在末尾添加所需的填充：

nav

请记住，在执行此操作时，您需要在nav a伪元素上设置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; }，因为我们需要它固定在链接的左侧：

left: 0

Here是一个更新的小提琴，其中包含了所有这些内容。

Answer 2

也许这就是你想要的：Fiddle

我认为你的HTML看起来像那样。您需要的是将link显示为inline-block（这样您就可以设置width的{{1}}和height），设置{{1}与link相同，然后将line-height的{{1}}设置为高于navigation bar height的某个数字，然后使用height生成link {1}}从某种颜色到透明

有一些navigation bar height

*注意：这会有一些浏览器兼容性问题，因为某些较旧的浏览器不支持CSS hover

＆＃13;

link

＆＃13;

background-color

＆＃13;

编辑：

如果您希望在底边应用渐变，则可以通过为CSS3 Gradients添加body { background: blue; } nav { width: 100%; height: 50px; margin: 20px 0 0; background: #919924; } a { padding: 0 10px; display: inline-block; line-height: 50px; height: 125px; } a:hover { background: -webkit-linear-gradient(red, transparent); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, transparent); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, transparent); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, transparent); /* Standard syntax */ }来更改<nav> <a href="#"> My Cats </a> <a href="#"> My Dogs </a> <a href="#"> My Pets </a> </nav>，如下所示：Fiddle

您需要将CSS设为a:after，然后使用gradient effect和link

创建position: relative

*注意：要使a:after生效，您需要添加position: absolute，否则无法创建

＆＃13;

z-index: -1

＆＃13;

:after

＆＃13;

CSS导航链接悬停

2 个答案:

编辑：