html - :hover background? (Twitter-Bootstrap) 忽略了 CSS 圆 Angular

Question

我对 Twitter-Bootstrap 导航栏有点困惑，它的圆 Angular 。我已经为导航栏定义了圆 Angular 。当您将光标悬停在导航栏上时，a:hover 背景似乎忽略了 Angular 落。

下面是一些截图:

Looks nice with smooth corners.

And this happens on a:hover

如何在 CSS 中定义 a:hover 而不覆盖 Angular ？我知道一种方法是使用图像文件，但目前这个选项不适合。

---

编辑:

我已经设法使用@Radian 的代码使左侧 a:hover flex ，但是，右侧菜单 a:hover 效果完全困惑。

这段代码应该为第一个菜单链接添加圆 Angular ，它实际上做了什么，但有一些不需要的效果。

  .navbar .nav > li:first-child a {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

效果如下:

1) This looks okay, just as I need it to be.

2) That however, isn't okay.

JSFiddle:http://jsfiddle.net/maku1337/GD23q和 http://jsfiddle.net/maku1337/GD23q/embedded/result/以获得更清晰的 View 。

Answer 1

我写的这段代码也许能帮到你，这适用于现代浏览器:

jsfiddle.net/C6zV8/