user4756836 user4756836 - 1 month ago 17
CSS Question

Change caret color only if hovered or focused

I am trying to have the caret color be black if it is not hovered or focused and be white if it is hovered or focused. I have tried using

:hover
and
:focus
on the caret but they seem to have no effect.

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


I have tried doing:

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


And then inside my media query:

.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

Answer

The :hover should be applied to your anchor element, not the .caret.


Use this instead:

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

Code Snippet:

@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