2015-10-05 212 views
0

我想在使用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>

+0

'#line_1'既不是'#menu_sym'的直接後代,相鄰兄弟或一般兄弟。只需使用#menu_sym#line_1 {}'。 – TylerH

+0

謝謝,我應該在哪裏用戶懸停? – SNos

回答

1

你試過,> + ~的那些,不適合你的結構。

>是子選擇器,或更有效地稱爲立即子選擇器,因此它只適用於直接的父子關係。

+是一個相鄰的兄弟選擇器,所以它只適用於當你試圖選擇同一層級的下一個元素。

~是一個通用的兄弟選擇器,所以它只適用於當你試圖選擇同一層級的任何元素。

相反,你可以使用以下選擇:

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

+0

例如,我會用「孩子」或「直系後裔」而不是「直系後代」,這並不明確排除孫子。 https://en.wikipedia.org/wiki/Lineal_descendant – isherwood

+0

@isherwood如果我命名它,我可能也會這樣做。我猜「孩子選擇器」的「官方」名稱很模糊。 – TylerH

+0

不是。在這種情況下,「孩子」只有一個含義。孫子不是孩子。 – isherwood

0

試試這個。

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

0

如果我理解你已經換貨需要轉型做什麼。 更改大小。你需要通過一個

#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)。