html - 仅在悬停或聚焦时更改插入符号的颜色

我试图使插入符号的颜色在未悬停或聚焦时为黑色，而在悬停或聚焦时为白色。我尝试在插入符号上使用:hover和:focus，但它们似乎没有效果。

HTML：

<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>

CSS：

.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;
  }
}

我试着做：

.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;
}

JSFiddle Demo

最佳答案

: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