CSS nav元素哈弗随着底部边框

Question

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

我可以设置悬停背景颜色，但我该怎么办边框和小箭头是底部？

谢谢。

Answer 1

对于边框，您只需使用相同的代码即可设置边框并更新其颜色。 You can try my example on jsFiddle

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

至于箭头/钻石/三角什么：这东西你不能设置，很容易，但最简单的解决办法是添加背景，而不是使用纯HTML/CSS。

更新：Here's an animated example.