CSS中的悬停问题答案

【问题标题】：Hovering Issue in CSSCSS中的悬停问题
【发布时间】：2022-01-29 15:29:20
【问题描述】：

我正在尝试使导航链接具有蓝色，悬停效果具有深蓝色。我得到了正确的颜色，但是当我尝试使用悬停时，它不起作用。有谁是什么问题？另外，有谁知道如何用我的自定义样式覆盖引导样式而不弄乱。谢谢！

我已经在下面包含了必要的代码，再次感谢您帮助我解决了我的这个难题。

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: #3F72AF;
    --dark-blue: #3F72AF;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Outfit", sans-serif;
  color: var(--blue);
}

body {
    background: var(--white);
}

/* Navbar */
nav {
    background: var(--light-blue);
}

#brand, #link {
    color: var(--blue);
}

.nav-link.hover {
    color: var(--dark-blue) !important;
}

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

  <!-- Links -->
  <link rel="stylesheet" href="style.css" />
  <link rel="shortcut icon" href="logo.png" type="image/x-icon" />

<!-- Navbar -->
  <nav class="navbar navbar-expand-md navbar-light fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" id='brand' href="#">Amodh Dhakal</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#" id='link'>Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#" id='link'>Project</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#" id='link'>Contact</a>
          </li>
      </div>
    </div>

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

看起来是两件事。蓝色和深蓝色具有相同的十六进制值，因此您需要将它们更改为您想要的任何值：

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: blue;
    --dark-blue: darkblue; 
}

我注意到您使用 .hover 而不是 :hover，因此您需要将 css 悬停效果更改为：

.nav-link:hover {
    color: var(--dark-blue) !important;
}

【讨论】：

非常感谢！这真的很有帮助。

【解决方案2】：

更改根目录中的颜色值

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: #3F72AF; <- Same values
    --dark-blue: #3F72AF; <- Same values
}

然后改变

.nav-link.hover {
    color: var(--dark-blue) !important;
}

到

.nav-link:hover {
    color: var(--dark-blue) !important;
}

【讨论】：

【解决方案3】：

blue和dark-blue是同一种颜色；尝试更改其中之一：

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: #3384e5;//<-- changed this
    --dark-blue: #3F72AF; 
}

【讨论】：