对其他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">—</div>
<div class="line_triple" id="line_2">—</div>
<div class="line_triple" id="line_3">—</div>
</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, #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">—</div>
<div class="line_triple" id="line_2">—</div>
<div class="line_triple" id="line_3">—</div>
</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 #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">—</div>
<div class="line_triple" id="line_2">—</div>
<div class="line_triple" id="line_3">—</div>
</div>
</div>
答
如果我理解你已经换货需要转型做什么。 更改大小。你需要通过一个
#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)。
'#line_1'既不是'#menu_sym'的直接后代,相邻兄弟或一般兄弟。只需使用#menu_sym#line_1 {}'。 – TylerH
谢谢,我应该在哪里用户悬停? – SNos