Question

我在一条水平线上有3 <div>个。每个宽度= 33.33％，我希望在悬停时将一个div的宽度更改为50％，将其他两个更改为25％。

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

我可以将其应用于A作为

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

＆＃13;

* {
  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 */
}

＆＃13;

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

＆＃13;

Answer 2

Flexbox可以在没有父选择器的情况下执行此操作：

__DIR__

includes/header.php

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

2 个答案: