Question

我正在尝试使用3个不同的div在容器上使用悬停效果，在悬停时，它需要更改填充大小。

我尝试使用+，＆gt;，〜但似乎没有任何效果。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您尝试的那些> + ~不适合您拥有的结构。

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

+是一个相邻的兄弟选择器，所以它只适用于您尝试在同一层次结构级别选择下一个元素时。

~是一个通用的兄弟选择器，所以它只适用于您尝试选择同一层次结构级别的任何元素。

相反，您可以使用以下选择器：

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

Answer 2

试试这个。

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

Answer 3

如果我明白你的意思，你需要进行过渡。改变大小。你需要逐一做到这一点

#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上）。

悬停对其他DIV无效的影响

3 个答案: