更改颜色孩子跨度上徘徊

我有以下的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

更改颜色孩子跨度上徘徊

回答

相关问题