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

我试图在ul被徘徊或点击时获得li的颜色。下面是相关的HTML我一起工作：悬停式样似乎只适用于li内容的一部分。

<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>

当我尝试使用此样式，这些立的，我没有得到任何效果：

.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改变为相同的颜色在一起的时候或者悬停因为他们在李娜的组合在一起看起来很直接对我来说应该怎么做，但它不工作。有什么建议么？

来源

2017-10-07 kalex

这是因为标签设置自己的颜色，这是压倒一切的UL

更改CSS这样：

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

Here是展示

来源

2017-10-07 19:04:46 Jesus

谢谢，但这似乎没有改变任何东西。只是为了澄清，我没有问题让图标或p内容在盘旋时改变颜色，但我试图让它们在任何一个悬停时改变颜色。 – kalex

你是否认为图标是bulletpoint？实际的图标元素是空的？你关闭了我的标签，但没有放任何东西？正如你可以看到，当我把东西放在它的图标中：https：//jsfiddle.net/jq26e85c/7/ – Jesus

我使用离子图标库：http://ionicons.com/，所以这些图标显示因为我希望他们。他们只是没有得到p内容的突出显示。我认为相当于我在那个小提琴中寻找的东西将是链接文字改变颜色的子弹点。 – kalex

你可以使用inherit一个片段使其简短：

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;}

<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>

来源

2017-10-07 19:30:09

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

回答

相关问题