Question

如果没有徘徊或聚焦，我试图让插入颜色为黑色，如果它是悬停或聚焦的话，我会尝试为白色。我尝试在插入符号上使用:focus和<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menu with caret<i class="caret"></i></a> <ul class="dropdown-menu"> <li> <a href="#"> Sub Menu </a> </li> </ul> </li> </ul>，但它们似乎没有任何效果。

HTML：

.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav > li > a {
    background-color: #fff;
    color: #333333 !important;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus {
    color: #fff !important;
    background: #2d3335;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #2d3335;
  }
}

CSS：

.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #000;
  border-bottom-color: #000;
}

我尝试过：

.navbar .nav li.dropdown > .dropdown-toggle .caret:hover,
.navbar .nav li.dropdown > .dropdown-toggle .caret:focus {
    border-top-color: #fff;
    border-bottom-color: #fff;
}

然后在我的媒体查询中：

SIGCHLD

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttle

Answer 1

:hover应该应用于您的锚元素，而不是.caret。

请改用：

.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.navbar .nav li.dropdown > .dropdown-toggle:hover .caret,
.navbar .nav li.dropdown > .dropdown-toggle:focus .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

代码段：

@media (max-width: 767px) {
  .navbar-default .navbar-nav > li > a {
    background-color: #fff;
    color: #333333 !important;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus {
    color: #fff !important;
    background-color: #2d3335 !important;
  }
  .navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: #333333;
    border-bottom-color: #333333;
  }
  .navbar .nav li.dropdown > .dropdown-toggle:hover .caret,
  .navbar .nav li.dropdown > .dropdown-toggle:focus .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #2d3335;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav-gradient">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="/domains/view/high-end-price" class="dropdown-toggle" data-toggle="dropdown">
              Menu with caret<i class="caret"></i></a>
            <ul class="dropdown-menu">
              <li>
                <a href="/domains/view/new-listings">
                  Sub Menu
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Revised jsFiddle

Answer 2

你试过这个吗？

navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: #000;
    border-bottom-color: #000;
}

仅在悬停或聚焦时更改插入颜色

2 个答案: