Question

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

我的问题是，当我点击用户图标并选择其中一个下拉菜单时，用户图标也会突出显示（当您单击＆＃34; D＆＃34;并移动光标时，在附加的scriptlet中复制）一点点。）

如何阻止图标＆＃34; D＆＃34;从光标向下移动后突出显示？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以在background:none元素的父级a class="dropdown-toggle"...>上应用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"> ...

完整的代码段：

＆＃13;
＆＃13;
<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>
＆＃13;
<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"/>  <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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

:focus事件正在突出显示。因此，您可以通过覆盖Bootstrap的默认:focus事件来阻止这种情况，如下所示：

.nav > li > a:focus {
    background-color: transparent;
}

如何防止Boostrap static-header图标被突出显示

2 个答案: