单击并悬停碰撞答案

【问题标题】：Click and hover collision单击并悬停碰撞
【发布时间】：2015-04-10 22:35:58
【问题描述】：

我正在使用 Bootstrap，但在使用 jQuery 时遇到了问题。我在标题处有一个导航栏，我希望当鼠标在链接上浏览以及单击 glyphicon-plus 时每个链接都具有不同的颜色。在我单击字形图标并再次单击它之前，它运行良好。从那时起，悬停功能不再适用于字形图标。

我该如何解决？

var toggleState = true;
$('.dropdown-toggle').on("click", function() {
  if (toggleState) {
    $(this).css("background-color", "#395ECC");
    $(this).css("border-radius", "5px");
  } else {
    $(this).css("background-color", "#4775FF");
    $(this).css("border-radius", "0px");
  }
  toggleState = !toggleState;
});

$(".navbar li").hover(function() {
  $(this).css("background-color", "#395ECC");
  $(this).css("border-radius", "5px");
}, function() {
  $(this).css("background-color", "#4775FF");
  $(this).css("border-radius", "0px");
});

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
       <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.php" title="Home">
                <span class="glyphicon glyphicon-home"></span> 
            </a>
          </div> 
          <ul class="nav navbar-nav">
            <li><a href="#"><b>Link</b></a></li>
            <li><a href="#"><b>Link</b></a></li>
            <li><a href="#"><b>Link</b></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-plus"><b class="caret"></b></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
                <li><div class="divider"></div></li>
                <li><a href="#"><small><b>Link</b></small></a></li>
              </ul>
            </li>
          </ul>
          
        </nav>

【问题讨论】：

您的 HTML 中没有 navbar 类。
.dropdown-toggle 中没有可点击的内容。
我强烈推荐使用 CSS 而不是 jQuery。当您悬停或下拉菜单处于活动状态（您已单击它）时，Bootstrap 已经更改了颜色。如果您想更改颜色，请查看getbootstrap.com/customize。从长远来看，它会为您省去很多麻烦。
.dropdown-toggle 是一个字形图标，是的，您可以点击它。
@redbmk 我用的是Bootstrap CDN，刚开始的时候不想下载，我知道会更容易。

标签： jquery jquery-hover jquery-click-event

【解决方案1】：

我强烈建议您使用 LESS，或者至少使用 http://getbootstrap.com/customize/ 中想要的颜色生成自定义 CSS。主要原因是以下5行代码更改：

导致 CSS 的这种差异：

  .navbar-default {
    background-color: #4775ff;
    border-color: #265cff;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus,
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  .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 {
    background-color: #395ecc;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    border-radius: 5px
  }

您可以将其添加为自定义 CSS，但其他非常简单的更改最终会在生成的 CSS 中产生巨大差异。如果您希望最终结果看起来不错，则需要考虑引导程序提供的所有不同场景。例如，使用这个 sn-p 时，很难在新的背景颜色中看到默认字体颜色。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="index.php" title="Home">
      <span class="glyphicon glyphicon-home"></span> 
    </a>
  </div>
  <ul class="nav navbar-nav">
    <li><a href="#"><b>Link</b></a>
    </li>
    <li><a href="#"><b>Link</b></a>
    </li>
    <li><a href="#"><b>Link</b></a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-plus"><b class="caret"></b></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
        <li>
          <div class="divider"></div>
        </li>
        <li><a href="#"><small><b>Link</b></small></a>
        </li>
      </ul>
    </li>
  </ul>

</nav>
<style>
  .navbar-default {
    background-color: #4775ff;
    border-color: #265cff;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus,
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  .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 {
    background-color: #395ecc;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    border-radius: 5px
  }
</style>

【讨论】：