对其他DIV不起作用的悬停效果

我想在使用3个不同div的容器上使用悬停效果，在悬停时它需要更改填充尺寸。对其他DIV不起作用的悬停效果

我试过使用+，>，〜但似乎没有任何工作。

#menu_sym { 
 
    left: 0px; 
 
    font-size: 40px; 
 
    color: rgba(0, 0, 0, 1); 
 
    position: fixed; 
 
    z-index: 9999; 
 
    margin-top: 40px; 
 
    margin-right: 0px; 
 
    line-height: 0; 
 
} 
 
.line_triple { 
 
    padding-top: 7px; 
 
    cursor: pointer; 
 
} 
 
#line_1 { 
 
    padding-left: 7px; 
 
} 
 
#line_2 { 
 
    padding-left: 10px; 
 
} 
 
#line_3 { 
 
    padding-left: 0px; 
 
} 
 
#menu_sym:hover > #line_1, 
 
#line_2, 
 
#line_3 { 
 
    padding-left: 0px; 
 
}

<div id="menu_sym"> 
 

 
    <div id="triple_line"> 
 

 
    <div class="line_triple" id="line_1">&#x2014;</div> 
 
    <div class="line_triple" id="line_2">&#x2014;</div> 
 
    <div class="line_triple" id="line_3">&#x2014;</div> 
 

 
    </div> 
 

 
</div>

来源

2015-10-05 SNos

'＃line_1'既不是'＃menu_sym'的直接后代，相邻兄弟或一般兄弟。只需使用#menu_sym＃line_1 {}'。 – TylerH

谢谢，我应该在哪里用户悬停？ – SNos

你试过，> + ~的那些，不适合你的结构。

>是子选择器，或更有效地称为立即子选择器，因此它只适用于直接的父子关系。

+是一个相邻的兄弟选择器，所以它只适用于当你试图选择同一层级的下一个元素。

~是一个通用的兄弟选择器，所以它只适用于当你试图选择同一层级的任何元素。

相反，你可以使用以下选择：

#menu_sym { 
 
    left: 0px; 
 
    font-size: 40px; 
 
    color: rgba(0, 0, 0, 1); 
 
    position: fixed; 
 
    z-index: 9999; 
 
    margin-top: 40px; 
 
    margin-right: 0px; 
 
    line-height: 0; 
 
} 
 
.line_triple { 
 
    padding-top: 7px; 
 
    cursor: pointer; 
 
} 
 
#line_1 { 
 
    padding-left: 7px; 
 
} 
 
#line_2 { 
 
    padding-left: 10px; 
 
} 
 
#line_3 { 
 
    padding-left: 0px; 
 
} 
 
#menu_sym:hover #line_1, #menu_sym:hover #line_2, #menu_sym:hover #line_3 { 
 
    padding-left: 0px; 
 
}

<div id="menu_sym"> 
 

 
    <div id="triple_line"> 
 

 
    <div class="line_triple" id="line_1">&#x2014;</div> 
 
    <div class="line_triple" id="line_2">&#x2014;</div> 
 
    <div class="line_triple" id="line_3">&#x2014;</div> 
 

 
    </div> 
 

 
</div>

来源

2015-10-05 15:14:54 TylerH

例如，我会用“孩子”或“直系后裔”而不是“直系后代”，这并不明确排除孙子。 https://en.wikipedia.org/wiki/Lineal_descendant – isherwood

@isherwood如果我命名它，我可能也会这样做。我猜“孩子选择器”的“官方”名称很模糊。 – TylerH

不是。在这种情况下，“孩子”只有一个含义。孙子不是孩子。 – isherwood

试试这个。

#menu_sym { 
 
    left: 0px; 
 
    font-size: 40px; 
 
    color: rgba(0, 0, 0, 1); 
 
    position: fixed; 
 
    z-index: 9999; 
 
    margin-top: 40px; 
 
    margin-right: 0px; 
 
    line-height: 0; 
 
} 
 
.line_triple { 
 
    padding-top: 7px; 
 
    cursor: pointer; 
 
} 
 
#line_1 { 
 
    padding-left: 7px; 
 
} 
 
#line_2 { 
 
    padding-left: 10px; 
 
} 
 
#line_3 { 
 
    padding-left: 0px; 
 
} 
 
#menu_sym:hover #triple_line #line_1, 
 
#menu_sym:hover #triple_line #line_2, 
 
#menu_sym:hover #triple_line #line_3 { 
 
    padding-left: 0px; 
 
}

<div id="menu_sym"> 
 

 
    <div id="triple_line"> 
 

 
    <div class="line_triple" id="line_1">&#x2014;</div> 
 
    <div class="line_triple" id="line_2">&#x2014;</div> 
 
    <div class="line_triple" id="line_3">&#x2014;</div> 
 

 
    </div> 
 

 
</div>

来源

2015-10-05 15:20:16

如果我理解你已经换货需要转型做什么。更改大小。你需要通过一个

#line_1{ 
    padding-left:7px; 
    transition: padding 0.3s; 
} 
#line_2{ 
    padding-left:10px; 
    transition: padding 0.3s; 
} 
#menu_sym:hover #line_1{ 
    padding:opx; 
#menu_sym:hover #line_2{ 
    padding:opx;

做一个，你需要注意的是你把的div立即容器后（在HTML）。

来源

2015-10-05 15:28:52

对其他DIV不起作用的悬停效果

回答

相关问题