html - 如何防止突出显示 Bootstrap 静态 header 图标

Question

我有一个包含图标的静态 HTML header 。一个图标使用了 Bootrap 的 navbar dropdown component .

我的问题是，当我单击用户图标并选择其中一个下拉菜单时，用户图标也会突出显示(当您单击“D”并将光标向下移动一点时，会在附加的 scriptlet 中复制)。

如何防止图标“D”在将光标向下移动一点后突出显示？

<style> li.navbar-nav > a:hover,
li.navbar-nav > a:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #ffffff;
  opacity: 1;
}
.navbar.navbar-ct-blue {
  background: #1B96BF;
  border: 1px solid #1B96BF;
  max-height: 50px;
  line-height: 30px;
  margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
  display: table-cell;
  width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
  color: white;
  font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
  color: #00F2FF;
  background: none;
}
.navbar.navbar-ct-green {
  background: #1B96BF;
  border: 1px solid #1B96BF;
  max-height: 50px;
  line-height: 30px;
  margin: 0;
}
.navbar.navbar-ct-green .nav-justified > li {
  display: table-cell;
  width: 1%
}
.navbar.navbar-ct-green .nav-justified > li > a {
  color: white;
  font-size: 30px;
}
.navbar.navbar-ct-green .nav-justified > li > a:hover {
  color: #00F2FF;
  background: none;
}
.table {
  margin-bottom: 60px;
}
</style>

<link href="http://themes-pixeden.com/font-demos/7-stroke/Pe-icon-7-stroke.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-ct-green navbar-fixed-top" role="navigation">
  <div class="container">
    <ul class="nav nav-justified">
      <li>
        <a href="#">
          <i class="pe-7s-timer"></i>A
        </a>
      </li>

      <li class="navbar-nav">
        <a href="#">
          <i class="pe-7s-note2" style="color: white;"></i>B
        </a>
      </li>

      <li class="navbar-nav">
        <a href="#">
          <i class="pe-7s-config" style="color: white;"></i>C
        </a>
      </li>

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          <i class="pe-7s-user"></i>  <span class="caret"></span>D
        </a>
        <ul class="dropdown-menu" background="blue">
          <li>
            <a href="#">Logout</a>
          </li>
          <li>
            <a href="#">Profile</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您可以在最后一个 a class="dropdown-toggle"...> 上应用内联样式作为 background:none(或透明)，它是您的父级D 元素:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" style="background:none !important;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  ...

编辑:

另一种方法是定义一个 css 类，如 noFocusBkg 如下，并将其应用于包含 li 的元素:

.noFocusBkg .dropdown-toggle:focus { /*** new class to prevent highlighting */
  background: none; /* or transparent or inherit */
}

<li class="dropdown noFocusBkg">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  ...

完整代码片段:

<style> 
li.navbar-nav > a:hover,
li.navbar-nav > a:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #ffffff;
  opacity: 1;
}
.navbar.navbar-ct-blue {
  background: #1B96BF;
  border: 1px solid #1B96BF;
  max-height: 50px;
  line-height: 30px;
  margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
  display: table-cell;
  width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
  color: white;
  font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
  color: #00F2FF;
  background: none;
}
.navbar.navbar-ct-green {
  background: #1B96BF;
  border: 1px solid #1B96BF;
  max-height: 50px;
  line-height: 30px;
  margin: 0;
}
.navbar.navbar-ct-green .nav-justified > li {
  display: table-cell;
  width: 1%
}
.navbar.navbar-ct-green .nav-justified > li > a {
  color: white;
  font-size: 30px;
}
.navbar.navbar-ct-green .nav-justified > li > a:hover {
  color: #00F2FF;
  background: none;
}
.table {
  margin-bottom: 60px;
}

.noFocusBkg .dropdown-toggle:focus { /*** new class to prevent highlighting */
  background: none; /* or transparent or inherit */
}
</style>

<link href="http://themes-pixeden.com/font-demos/7-stroke/Pe-icon-7-stroke.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-ct-green navbar-fixed-top" role="navigation">
  <div class="container">
    <ul class="nav nav-justified">
      <li>
        <a href="#">
          <i class="pe-7s-timer"></i>A
        </a>
      </li>

      <li class="navbar-nav">
        <a href="#">
          <i class="pe-7s-note2" style="color: white;"></i>B
        </a>
      </li>

      <li class="navbar-nav">
        <a href="#">
          <i class="pe-7s-config" style="color: white;"></i>C
        </a>
      </li>

      <li class="dropdown noFocusBkg">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          <i class="pe-7s-user"></i>  <span class="caret"></span>D
        </a>
        <ul class="dropdown-menu" background="blue">
          <li>
            <a href="#">Logout</a>
          </li>
          <li>
            <a href="#">Profile</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>