悬停时更改子跨度的颜色答案

【问题标题】：Change color for child span on hovering悬停时更改子跨度的颜色
【发布时间】：2017-08-19 03:16:01
【问题描述】：

我有以下 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);。然后，当我将鼠标悬停在类 node 的 li 元素上时，将 color: rgba(0, 0, 0, 0.3); 设置为与第一个 .action-button-container 子内的类 icon 的跨度。然后，当我与icon 类进行跨度时，我想设置color: rgba(0, 0, 0, 0.6);。

这是我尝试过的演示，但没有按预期工作：

演示：https://jsfiddle.net/pw9ryrnp/

【问题讨论】：

QUOTE “根据 HTML 生活标准，SPAN 元素的内容模型是“短语内容”。 link here

标签： css

【解决方案1】：

这是一个损坏的选择器：

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

这就是完成你想要的事情应该是什么：

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

为什么有效：

> 选择器（子组合器）确保规则仅适用于作为悬停的 .node 的直接子元素的 .action-button-container 元素（不是孙子元素。
您错误地使用了: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>

【讨论】：

当我悬停一个子 li 时，父级也会悬停，而当我悬停 span.icon 时，它什么也不做。
@AimadMAJDOU 修复了这两个问题。

【解决方案2】：

您可以通过使用 > 子 css 选择器来仅选择被悬停元素的子元素来做到这一点。

下面我把.node:hover .action-button-container:first-child .icon改成了.node:hover>.action-button-container .icon

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

.node:hover>.action-button-container .icon {
	color: rgba(0, 0, 0, 0.3);
}
.node .action-button-container .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>

【讨论】：

【解决方案3】：

试试这个：

#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/ 也许这对你有帮助

【讨论】：