更改顏色孩子跨度上徘徊

我有以下的html代碼：更改顏色孩子跨度上徘徊

<ul> 
    <li id="ajson1" class="node"> 
     <a href="#" id="ajson1_anchor">Afrique</a> 
     <span class="action-button-container"> 
       <span class="icon">X</span> 
       <span class="icon">Y</span> 
       <span class="icon">Z</span> 
      </span> 
     <ul> 
     <li id="ajson2" class="node"> 
      <a href="#" id="ajson2_anchor">Maroc</a> 
      <span class="action-button-container"> 
       <span class="icon">X</span> 
       <span class="icon">Y</span> 
       <span class="icon">Z</span> 
      </span> 
     </li> 
     <li id="ajson3" class="node"> 
      <a href="#" id="ajson3_anchor">Algerie</a> 
      <span class="action-button-container"> 
       <span class="icon">X</span> 
       <span class="icon">Y</span> 
       <span class="icon">Z</span> 
      </span> 
     </li> 
     </ul> 
    </li> 
</ul>

所以我想要做的就是與類icon設置的所有跨跨度action-button-container到color: rgba(0, 0, 0, 0);內。然後當我懸停在li元素與類node設置color: rgba(0, 0, 0, 0.3);跨越icon類內的第一個.action-button-container孩子。然後，當我在與類icon rheove跨我想要設置color: rgba(0, 0, 0, 0.6);。

這裏是什麼，我嘗試了演示，但預期它沒有工作：

DEMO：https://jsfiddle.net/pw9ryrnp/

來源

2017-08-18 Ichigo Kurosaki

QUOTE 「根據HTML的生活水平，爲SPAN元素的內容模型是」措詞內容「。」 [link here]（https：// stackoverflow。com/questions/5545884/can-span-tags-have-any-type-of-tags-inside-them） – Ivan

-1

試試這個：

#ajson1 .icon:hover{ 
    color: rgba(0, 0, 0, 0); 
} 

#ajson2 .icon:hover { 
    color: rgba(0, 0, 0, 0.3); 
} 
#ajson3 .icon:hover{ 
    color: rgba(0, 0, 0, 0.6); 
}

我更新JS提琴。這裏是的jsfiddle：https://jsfiddle.net/pw9ryrnp/ 也許這可以幫助你

來源

2017-08-18 19:01:57 user8455694

這是一個破碎的選擇：

.node:hover .action-button-container:first-child .icon {

這是它應該是完成你想要的東西：

.node:hover > .action-button-container:first-of-type .icon {

爲什麼有效：

Th e >選擇器（子組合器）確保該規則僅適用於元素，該子元素是.node的直接子元素（不是孫子女）。
您錯誤地使用了:first-child，因爲該選擇器將選擇父級的第一個子元素，而不管它是否與您的類選擇器匹配。它找不到任何.action-button-container這是父母的第一個孩子，所以它從未觸發過。相反，我們可以使用:first-of-type，因爲這些元素是每個.node中的第一個span。

編輯：作出更多修改以解決警告。

.action-button-container { 
 
    margin-left: 10px; 
 
} 
 

 
.node .action-button-container .icon { 
 
    color: rgba(0, 0, 0, 0); 
 
} 
 

 
.node > a:hover + .action-button-container:first-of-type .icon, 
 
.node > .action-button-container:hover .icon { 
 
    color: rgba(0, 0, 0, 0.3); 
 
} 
 

 
.node > .action-button-container:first-of-type .icon:hover { 
 
    color: rgba(0, 0, 0, 0.6); 
 
}

<ul> 
 
    <li id="ajson1" class="node"> 
 
     <a href="#" id="ajson1_anchor">Afrique</a> 
 
     <span class="action-button-container"> 
 
      <span class="icon">X</span> 
 
      <span class="icon">Y</span> 
 
      <span class="icon">Z</span> 
 
     </span> 
 
     <ul> 
 
      <li id="ajson2" class="node"> 
 
       <a href="#" id="ajson2_anchor">Maroc</a> 
 
       <span class="action-button-container"> 
 
        <span class="icon">X</span> 
 
        <span class="icon">Y</span> 
 
        <span class="icon">Z</span> 
 
       </span> 
 
      </li> 
 
      <li id="ajson3" class="node"> 
 
       <a href="#" id="ajson3_anchor">Algerie</a> 
 
       <span class="action-button-container"> 
 
        <span class="icon">X</span> 
 
        <span class="icon">Y</span> 
 
        <span class="icon">Z</span> 
 
       </span> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

來源

2017-08-18 19:06:32

當我懸停一個孩子'li'時，父母也會徘徊，當我將'span.icon'它什麼也沒做。 –

@AimadMAJDOU解決了這兩個問題。 –

您可以通過使用>孩子CSS選擇器，只選擇元素的子做到這一點正在徘徊。

下面，我已經改變.node:hover .action-button-container:first-child .icon到.node:hover>.action-button-container .icon

.action-button-container{ 
 
\t margin-left: 10px; 
 
} 
 
.node .action-button-container .icon{ 
 
\t color: rgba(0, 0, 0, 0); 
 
} 
 

 
.node:hover>.action-button-container .icon { 
 
\t color: rgba(0, 0, 0, 0.3); 
 
} 
 
.node .action-button-container .icon:hover{ 
 
\t color: rgba(0, 0, 0, 0.6); 
 
}

<ul> 
 
    <li id="ajson1" class="node"> 
 
     <a href="#" id="ajson1_anchor">Afrique</a> 
 
     <span class="action-button-container"> 
 
       <span class="icon">X</span> 
 
       <span class="icon">Y</span> 
 
       <span class="icon">Z</span> 
 
      </span> 
 
     <ul> 
 
     <li id="ajson2" class="node"> 
 
      <a href="#" id="ajson2_anchor">Maroc</a> 
 
      <span class="action-button-container"> 
 
       <span class="icon">X</span> 
 
       <span class="icon">Y</span> 
 
       <span class="icon">Z</span> 
 
      </span> 
 
     </li> 
 
     <li id="ajson3" class="node"> 
 
      <a href="#" id="ajson3_anchor">Algerie</a> 
 
      <span class="action-button-container"> 
 
       <span class="icon">X</span> 
 
       <span class="icon">Y</span> 
 
       <span class="icon">Z</span> 
 
      </span> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
</ul>

來源

2017-08-18 19:16:01 Zac

更改顏色孩子跨度上徘徊

回答

相關問題