使用css选择课程并不起作用

Question

我正在尝试在悬停时将导航链接的颜色更改为白色。

使用此功能不起作用： .nav-link：hover {color：white; }

<nav class="navbar navbar-toggleable-lg fixed-top navbar-inverse">
  <button class="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExampleDefault"
          aria-controls="navbarsExampleDefault"
          aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="container">
    <!-- You need this DIV for alignment -->
    <a class="navbar-brand"
       href="../index.php">d</a>

    <div class="collapse navbar-collapse"
         id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto scrollable-navmenu">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle active"
             href="#"
             id="dropdown01"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">MD</a>
          <div class="dropdown-menu"
               aria-labelledby="dropdown01">
            <a class="dropdown-item active"
               href="#">
              MD2 <span class="sr-only">(current)</span>
            </a>
            <a class="dropdown-item"
               href="../md4">MD4</a>
            <a class="dropdown-item"
               href="../md5">MD5</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"
             href="#"
             id="dropdown02"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">SHA</a>
          <div class="dropdown-menu"
               aria-labelledby="dropdown02">
            <a class="dropdown-item"
               href="../sha1">SHA1</a>
            <a class="dropdown-item"
               href="../sha256">SHA256</a>
            <a class="dropdown-item"
               href="../sha384">SHA384</a>
            <a class="dropdown-item"
               href="../sha512">SHA512</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"
             href="#"
             id="dropdown03"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">RIPEMD</a>
          <div class="dropdown-menu"
               aria-labelledby="dropdown03">
            <a class="dropdown-item"
               href="../ripemd128">RIPEMD128</a>
            <a class="dropdown-item"
               href="../ripemd160">RIPEMD160</a>
            <a class="dropdown-item"
               href="../ripemd256">RIPEMD256</a>
            <a class="dropdown-item"
               href="../ripemd320">RIPEMD320</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             href="../whirlpool">Whirlpool</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"
             href="#"
             id="dropdown04"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">Tiger</a>
          <div class="dropdown-menu"
               aria-labelledby="dropdown04">
            <a class="dropdown-item"
               href="../tiger128,3">Tiger128,3</a>
            <a class="dropdown-item"
               href="../tiger160,3">Tiger160,3</a>
            <a class="dropdown-item"
               href="../tiger192,3">Tiger192,3</a>
            <a class="dropdown-item"
               href="../tiger128,4">Tiger128,4</a>
            <a class="dropdown-item"
               href="../tiger160,4">Tiger160,4</a>
            <a class="dropdown-item"
               href="../tiger192,4">Tiger192,4</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             href="../snefru">Snefru</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             href="../gost">GOST</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             href="../adler32">Adler32</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             href="../crc32">CRC32</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             href="../crc32b">CRC32B</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"
             href="#"
             id="dropdown05"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">HAVAL</a>
          <div class="dropdown-menu"
               aria-labelledby="dropdown05">
            <a class="dropdown-item"
               href="../haval128,3">HAVAL128,3</a>
            <a class="dropdown-item"
               href="../haval160,3">HAVAL160,3</a>
            <a class="dropdown-item"
               href="../haval192,3">HAVAL192,3</a>
            <a class="dropdown-item"
               href="../haval224,3">HAVAL224,3</a>
            <a class="dropdown-item"
               href="../haval256,3">HAVAL256,3</a>
            <a class="dropdown-item"
               href="../haval128,4">HAVAL128,4</a>
            <a class="dropdown-item"
               href="../haval160,4">HAVAL160,4</a>
            <a class="dropdown-item"
               href="../haval192,4">HAVAL192,4</a>
            <a class="dropdown-item"
               href="../haval224,4">HAVAL224,4</a>
            <a class="dropdown-item"
               href="../haval256,4">HAVAL256,4</a>
            <a class="dropdown-item"
               href="../haval128,5">HAVAL128,5</a>
            <a class="dropdown-item"
               href="../haval160,5">HAVAL160,5</a>
            <a class="dropdown-item"
               href="../haval192,5">HAVAL192,5</a>
            <a class="dropdown-item"
               href="../haval224,5">HAVAL224,5</a>
            <a class="dropdown-item"
               href="../haval256,5">HAVAL256,5</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

您需要覆盖Bootstrap CSS，将其更改为：

.nav-link:hover { 
  color: white !important; 
}