Question

我正在尝试通过鼠标悬停一些技巧，但是我只停留在一点上。我想做的是，当我将鼠标悬停在“导航链接”之一上时，想要更改未悬停的链接。

例如，当我进入“ HOME”时，我希望其他导航链接的字体粗细变为浅。

这是我的HTML；

<div class="nav-bar">
       <a href="#" class="nav-link">HOME</a>
       <a href="#" class="nav-link">ABOUT</a>
       <a href="#" class="nav-link">RESUME</a>
       <a href="#" class="nav-link">CONTACT</a>
</div>

我相信可以使用CSS或jquery来完成，但是我被卡住了。谢谢你的帮助。

Answer 1

将鼠标悬停在div上并将鼠标悬停在锚点上

.nav-bar a {
  font-weight: normal;
}

.nav-bar:hover a {
  color: #CCC;
  font-weight: lighter;
}

.nav-bar a:hover {
  color: #0F0;
  font-weight: bold;
}

<div class="nav-bar">
  <a href="#" class="nav-link">HOME</a>
  <a href="#" class="nav-link">ABOUT</a>
  <a href="#" class="nav-link">RESUME</a>
  <a href="#" class="nav-link">CONTACT</a>
</div>

Answer 2

还有另一种方法可以使用伪选择器:not 这样就减少了CSS代码

.nav-bar a {
    font-weight: bold;
}
.nav-bar:hover a:not(:hover) {
    font-weight: normal;
}

<div class="nav-bar">
       <a href="#" class="nav-link">HOME</a>
       <a href="#" class="nav-link">ABOUT</a>
       <a href="#" class="nav-link">RESUME</a>
       <a href="#" class="nav-link">CONTACT</a>
</div>

CSS悬停更改未悬停的项目

2 个答案: