懸停式樣似乎只適用於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內容的一部分。

回答

相關問題