选择前一个元素并使用css应用效果

Question

我<div>在一条水平线上有3 秒.每个宽度= 33.33%,我想div在悬停时将宽度改为50%,将其他两个改为25%.

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>

我可以将它应用于A as

#A:hover{width:50%}
#A:hover+#B
{width:25%}
#A:hover~#C
{width:25%}

它工作正常.

当我们盘旋B

#B:hover{width:50%}
#B:hover+#A
{width:25%}
#B:hover~#C
{width:25%}

B扩大到50%,C缩小到25%.但#A仍然是33.33%.

我怎样才能解决这个问题.

Answer 1

在Css以前没有选择器

• 默认情况下,宽度为 33.33%
• 在父母悬停时,width将更改为25%
• 在div内部悬停的宽度改为50%

* {
  box-sizing: border-box;
}
.par {
  overflow: hidden; /* to clear floats */
}
.par div {
  width: 33.33%; /* default width */
  transition: .2s linear;
  border: 1px solid red;
  height: 100px;
  float: left;
}
.par:hover div {
  width: 25%; /* width when you hover on parent */
}
.par div:hover {
  width: 50% /* width when you hover on the element */
}

<div class="par">
  <div id="A">1</div>
  <div id="B">2</div>
  <div id="C">3</div>
</div>