Question

所以我正在尝试创建这个动画，当我将鼠标悬停在左div上时，它将宽度更改为100％，同时右div将宽度设置为0％。当我将鼠标悬停在右div上时，反之亦然。

但是，当我将鼠标悬停在右div上时，只有右div标记的宽度更改为100％，而左div的宽度不会更改，并且右边div在左下方，所以任何人都可以帮助我。

我将整个代码放在

之下

＆＃13;

body {
  margin: 0;
  background-color: #fcfcfc;
  font-family: 'Roboto', 'open-sans', sans-serif;
  font-weight: 400;
  text-decoration: none;
}

.navbarli {
  display: inline-block;
  padding-bottom: 15px;
  padding-top: 15px;
  padding-right: 20px;
  padding-left: 20px;
  color:
}

.navbarui {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbardiv {
  background-color: #282828;
  align-content: center;
  text-align: center;
  color: #e0e0e0;
}

nav div a {
  text-decoration: none;
  color: #e0e0e0;
}

nav a: hover {
  color: #d8d8d8;
}

.mycontainer {
  margin-left: 10%;
  margin-right: 10%;
  background-color: ;
}

.footer1 {
  text-align: center;
  align-content: center;
  min-height: 200px;
  background-color: #282828;
  color: #a3a3a3;
  clear: both;
}

.divsecl {
  height: 200px;
  width: 50%;
  text-align: center;
  align-content: center;
  float: left;
}

.divsecr {
  height: 200px;
  width: 50%;
  text-align: center;
  align-content: center;
  float: right;
}

.divsecl:hover {
  width: 100%;
}

.divsecl:hover+.divsecr {
  width: 0%;
}

.divsecr:hover {
  width: 100%;
}

.divsecr:hover+.divsecl {
  width: 0%;
}

.resultitem {
  background: #48e;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.resultitem:hover {
  background: #59f;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div>
  <div class="divsecl resultitem">
    <h1>Skills</h1>
  </div>
  <div class="divsecr resultitem">
    <h1>Portfolio</h1>
  </div>
</div>

＆＃13;

Answer 1

+选择器并不像您期望的那样在两个方向上工作。此选择器表示选择紧跟在之后的元素，因此仅在您悬停第一个元素时才有效。

如果你想要实现你想要的东西（我简化你的代码只保留相关部分），这是另一个想法

＆＃13;

.a {
  height: 200px;
  width: 50%;
  text-align: center;
  float: left;
  background: red;
  transition: 1s;
  overflow:hidden
}

.b {
  height: 200px;
  width: 50%;
  text-align: center;
  float: right;
  background: blue;
  transition: 1s;
  overflow:hidden
}

.container:hover .b{
  width: 100%;
}

.container:hover .a {
  width: 0%;
}
.a:hover {
  width: 100%!important;
}

.a:hover+.b {
  width: 0%;
}

＆＃13;

<div class="container">
  <div class="a">
    <h1>Skills</h1>
  </div>
  <div class="b">
    <h1>Portfolio</h1>
  </div>
</div>

＆＃13;

Answer 2

您需要添加更多CSS才能使“b”容器在悬停时收缩。那么，Temani Afif说了什么，但补充道：

.a:hover + .b {
  width: 0%!important;    
}

当鼠标悬停在右侧时，左侧div会减小宽度

2 个答案: