css - CSS Nav 元素悬停在底部边框

Question

我正在尝试复制以下效果：http ://amplifiedvideodesign.com/capture.png

我可以设置悬停的背景颜色，但我该如何设置底部的边框和小箭头？

谢谢。

Answer 1

对于边框，您可以使用相同的代码，您只需设置边框并更新其颜色。您可以在 jsFiddle 上尝试我的示例

.tabs a:hover {
    background-color: #444;
    border-bottom-color: #484;
    color: #484;
}

至于箭头/菱形/三角形什么的：这是你不能轻易设置的东西，但最简单的解决方案是添加背景而不是使用普通的 HTML/CSS。

更新：这是一个动画示例。