Question

HTML：

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="menu-primary" class="nav navbar-nav menustyle">
    <li><a href="#">Home</a></li>
  </ul>
</div>

CSS：

.menustyle a:before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 2px;
  background-color: #fff;
  width: 0%;
}
.nav > li > a:hover .menustyle a:before{
  width: 100%!important;
}

当我使用Bootstrap时这不起作用，但没有引导程序。

Answer 1

尝试使用.nav > li > a:hover:before代替.nav > li > a:hover .menustyle a:before ...

.nav > li > a:hover .menustyle a:before ....表示它会定位.menustyle a代码中的所有<a>元素。

.nav > li > a:hover:before {
  width: 100%!important;
}

<强> Fiddle Link

Answer 2

I have modified you code. If you want hover like this.

    <style type="text/css">           
        .menustyle a{
            position: relative;
        }
        .menustyle a:before{
                position: absolute;
                top: -5px;
                left: 0;
                content: "";
                height: 2px;
                background-color: #ff0000;
                width: 0%;
            }
        .menustyle > li > a:hover:before{
            width: 100% !important;
        }
    </style>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul id="menu-primary" class="nav navbar-nav menustyle">
            <li><a href="#">Home</a></li>
        </ul>
    </div>

如何覆盖Bootstrap悬停属性？

2 个答案: