html - 悬停样式似乎只适用于 li 内容的一部分。

Question

我试图让 ul 中的 li 的颜色在鼠标悬停或单击时发生变化。这是我正在使用的相关 HTML:

<div class="header-pages">
      <ul class="main-nav">
        <li><i class="ion-ios-person icon-small"></i><a href="#single-attendee"><p>Single Atendee</p></a></li>
        <li><i class="ion-ios-people icon-small"></i><a href="#group-tickets"><p>Group Tickets</p></a></li>
        <li><i class="ion-arrow-move icon-small"></i><a href="#investors"><p>Investors</p></a></li>
        <li><i class="ion-location icon-small"></i><a href="#startups"><p>StartUps</p></a></li>
      </ul>
    </div>

当我尝试使用它来设置这些 li 的样式时，我没有任何效果:

.header-pages .main-nav li:hover,
.header-pages .main-nav li:active
 {
  color: #0198E1;
}

当我只做图标或只做 p 时，它会按我想要的方式工作，但只是分开:

.header-pages .main-nav li p:hover,
.header-pages .main-nav li p:active
 {
  color: #0198E1;
}

我试图让我的 p 和 i 在鼠标悬停时一起更改为相同的颜色，因为它们在 li 中分组在一起，所以对我来说应该如何完成这件事似乎很简单，但它不起作用。有什么建议吗？

Answer 1

这是因为标签设置了自己的颜色覆盖了 ul

将CSS改成这样:

.header-pages .main-nav li:hover a,
.header-pages .main-nav li:hover i {
  color: #0198E1;
}

Here是一个片段来演示