html - 将鼠标悬停在右侧时，左侧 div 确实会减小宽度

Question

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

但是当我将鼠标悬停在右侧 div 上时，只有右侧 div 标签的宽度变为 100%，左侧 div 的宽度不变这使得右边的 div 位于左边，所以任何人都可以帮我解决这个问题。

我把整个代码放在下面

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

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

Answer 1

+ 选择器在两个方向上都不像您期望的那样工作。此选择器表示选择紧跟在之后的元素，因此仅当您将鼠标悬停在第一个元素上时才起作用。

如果你想实现你想要的，这是另一个想法(我简化了你的代码以只保留相关部分)

.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%;
}

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