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>

所以我想要做的是将所有跨度设置为范围icon内的action-button-container类到color: rgba(0, 0, 0, 0);。然后当我将li元素悬停在node类上时，将color: rgba(0, 0, 0, 0.3);设置为跨越第一个icon子级中的类.action-button-container。然后当我在课程icon上进行翻译时，我想设置color: rgba(0, 0, 0, 0.6);。

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

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

Answer 1

这是一个破碎的选择器：

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

这就是完成你想要的东西：

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

为什么会这样：

>选择器（子组合子）确保该规则仅适用于.action-button-container被追踪的.node直接子项的:first-child元素（不是孙子。 / p>
您错误地使用了.action-button-container，因为该选择器将选择父级的第一个子元素，而不管它是否与您的类选择器匹配。它无法找到任何父母的第一个孩子:first-of-type，因此它永远不会被触发。相反，我们可以使用span，因为这些元素是每个.node中的第一个.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); }。

编辑：做出更多修改以修复警告。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 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>

Answer 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);
}

我正在更新你的小提琴。这是jsfiddle：https://jsfiddle.net/pw9ryrnp/ 也许这可以帮到你

在悬停时更改子跨度的颜色

3 个答案: