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是演示

的代码段

Answer 2

您可以使用inherit简化和简单：

＆＃13;

i,
a,
p {
  color: inherit
}

li:hover {
  color: #0198E1;
}

/* demo purpose */
ul {list-style-type:none;}
i,a {display:inline-block;vertical-align:middle;}
i {font-size:2em;}
* {padding:0;}

＆＃13;

<link href="http://ionicons.com/css/ionicons.min.css?v=2.0.1" rel="stylesheet"/>
<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>

＆＃13;

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

2 个答案: