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

时间:2017-08-18 18:51:50

标签: css

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

3 个答案:

答案 0 :(得分:2)

这是一个破碎的选择器:

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

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

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

为什么会这样:

  1. >选择器(子组合子)确保该规则仅适用于.action-button-container被追踪的.node直接子项的:first-child元素(不是孙子。 / p>

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

  3. 编辑:做出更多修改以修复警告。

    &#13;
    &#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;
    &#13;
    &#13;

答案 1 :(得分:0)

您可以使用>子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>

答案 2 :(得分:-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);
}

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