css - 悬停时更改子跨度的颜色

Question

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

所以我想做的是将范围 action-button-container 内带有类 icon 的所有范围设置为 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/

Answer 1

这是一个损坏的选择器:

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

这是完成你想要的应该是什么:

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

为什么有效:

1. > 选择器(子组合器)确保规则只适用于 .action-button-container 元素，它们是 .node 悬停(不是孙子。

2. 您错误地使用了 :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>