时间戳

首页 > 解决方案 > CSS 不是选择器和 :hover

html - CSS 不是选择器和 :hover

问题描述

我对 :hover 感到困惑，对 not 选择器更加困惑，我是自学成才的，所以这可能是这里的问题：

我认为 :hover 定义了鼠标悬停的页面或站点的位，以激活它。

我一直在尝试使用 :not 伪类不选择 lnk 的一部分，而是选择它的其余部分。

这是我的代码：

body {
  font-family: 'Varta', sans-serif;
  margin: 0;
  padding: 0;
}

nav {
  border-right: 5px solid #0966C2;
  width: 30%;
  height: 100vh;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 2rem;
}

nav a {
  color: #0966C2;
  text-decoration: none;
  display: block;
  padding: 1rem;
}

nav a:hover {
  color: white;
  background-color: #0966C2;
  /* Why won't this css below not select the i(icon)   tag and select the rest re the links Home My Network etc. I am trying to replace the lines above*/
  /*nav a:hover :not(i)  {
    color: #fff;
    background: #0966C2;
}*/
}

nav a:hover i {
  color: #F3BA64;
}
<nav>
  <ul>
    <li><a href="#"><i class="fas fa-home" aria-hidden="true"></i> Home</a></li>
    <li><a href="#"><i class="fas fa-project-diagram" aria-hidden="true"></i> My Network</a></li>
    <li><a href="#"><i class="fas fa-handshake" aria-hidden="true"></i> Jobs</a></li>
    <li><a href="#"><i class="fas fa-comments" aria-hidden="true"></i> Messaging</a></li>
    <li><a href="#"><i class="fas fa-bell" aria-hidden="true"></i> Notifications</a></li>
  </ul>
</nav>

标签： htmlcss

解决方案

如果您想定位所有<i>内部 not hovered <a>，则不需要特定样式，只需为悬停的样式自定义样式即可a:hover i覆盖这些样式a i。

现在，如果您真的想选择未悬停的，可以这样使用：a:not(:hover) i

推荐阅读