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

By simon at 2018-02-07 • 0人收藏 • 53人看过

所以我试图创造这个动画,当我徘徊在左侧 div它将宽度更改为100%,并在同一个ti我是对的 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>

3 个回复 | 最后更新于 2018-02-07
2018-02-07   #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>

2018-02-07   #2

+选择器不能像你期望的那样在两个方向上工作。这个 选择器意味着选择放置的元素之后立即 只有当你悬停第一个元素时才工作。 这是另一个想法,如果你想实现你想要的东西(我简化了你的 代码只保留相关部分)_

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

2018-02-07   #3

您需要添加更多的CSS来使“b”容器在悬停时收缩。所以, Temani Afif说,但补充说:

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

登录后方可回帖

Loading...