css - 模仿兄弟元素对另一个兄弟元素的影响的问题

Question

我想模仿我在#boxLeft 上的效果和输出，但是当我这样做并添加 css3 过渡时，它失败了。我不得不用 -100px margin-top 值修复它来隐藏它。有人能帮忙吗？

HTML 和 CSS:

body {
  padding: 0;
  margin: 0;
}
p, h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}
#box {
  width: 100%;
  height: 100px;
  background-color: #636363;
}
.boxLeft,
.boxRight {
  width: 50%;
  height: 100px;
  /*   display: inline-block;   */
  float: left;
  padding: 10px;
  box-sizing: border-box;
  z-index: 1;
  overflow: hidden;
}
.boxLeft {
  background-color: red;
}
.blHeader {
  text-align: right;
}
.boxLeft:hover {
  background-color: orange;
  width: 100%;
  transition: .5s;
}
.boxLeft:hover ~.boxRight {
  display: none;
}
.boxLeft:hover > .blHeader {
  text-align: left;
}
.boxLeft:hover > .blCon {
  display: block;
}
.blCon,
.brCon {
  display: none;
}
.boxRight {
  background-color: blue;
}
.boxRight:hover {
  background-color: green;
  width: 100%;
  transition: .5s;
  margin-top: -100px;
}
.boxRight:hover~.boxLeft {
  display: none;
}
.boxRight:hover > .brHeader {
  text-align: left;
}
.boxRight:hover > .brCon {
  display: block;
  transition: .5s;
}

<div id="box">
  <div class="boxLeft">
    <h2 class="blHeader">Left Header</h2>
    <p class="blCon">Left content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
      repudiandae cumque!</p>
  </div>
  <div class="boxRight">
    <h2 class="brHeader">RIght Header</h2>
    <p class="brCon">Right content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
      repudiandae cumque!</p>
  </div>
</div>

我确定我只是错过了一些东西，但我已经尝试了几个小时。提前致谢。这是笔链接:http://goo.gl/l2eqG0

Answer 1

选择器 .boxRight:hover ~ .boxLeft 没有按预期工作，因为一般的兄弟组合器 ~ 只选择以下兄弟元素。由于元素 .boxLeft 在元素 .boxRight 之前，因此在将鼠标悬停在元素 .boxRight.

要解决此问题，一个选项是在将鼠标悬停在父 #box 元素上时隐藏第一个元素。

#box:hover .boxLeft {
  display: none;
}

然后你可以在实际悬停在第一个元素上时覆盖它:

#box .boxLeft:hover {
  display: block;
}

之所以可行，是因为只有两个元素。如果您没有将鼠标悬停在第一个元素上，则可以假设您将鼠标悬停在第二个元素上(这意味着模仿一般的兄弟组合器，因为您可以在将鼠标悬停在父元素上时设置第一个元素的样式)。

更新的代码段:

body {
  padding: 0;
  margin: 0;
}
p, h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}
#box {
  width: 100%;
  height: 100px;
  background-color: #636363;
}
.boxLeft,
.boxRight {
  width: 50%;
  height: 100px;
  /*   display: inline-block;   */
  float: left;
  padding: 10px;
  box-sizing: border-box;
  z-index: 1;
  overflow: hidden;
}
.boxLeft {
  background-color: red;
}
.blHeader {
  text-align: right;
}
.boxLeft:hover {
  background-color: orange;
  width: 100%;
  transition: .5s;
}
.boxLeft:hover ~.boxRight {
  display: none;
}
.boxLeft:hover > .blHeader {
  text-align: left;
}
.boxLeft:hover > .blCon {
  display: block;
}
.blCon,
.brCon {
  display: none;
}
.boxRight {
  background-color: blue;
  float: right;
}
.boxRight:hover {
  background-color: green;
  width: 100%;
  transition: .5s;
}
#box:hover .boxLeft {
  display: none;
}
#box .boxLeft:hover {
  display: block;
}
.boxRight:hover > .brHeader {
  text-align: left;
}
.boxRight:hover > .brCon {
  display: block;
  transition: .5s;
}

<div id="box">
  <div class="boxLeft">
    <h2 class="blHeader">Left Header</h2>
    <p class="blCon">Left content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
      repudiandae cumque!</p>
  </div>
  <div class="boxRight">
    <h2 class="brHeader">RIght Header</h2>
    <p class="brCon">Right content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
      repudiandae cumque!</p>
  </div>
</div>

---

但是，更灵活的选择是通过绝对定位从正常流中删除元素 .boxLeft 和 .boxRight。这样做，您可以避免在悬停时隐藏相应的同级元素:

更新的代码段:

body {
  padding: 0;
  margin: 0;
}
p, h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}
#box {
  width: 100%;
  height: 100px;
  background-color: #636363;
}
.boxLeft,
.boxRight {
  width: 50%;
  height: 100px;
  position: absolute;
  top: 0;
  padding: 10px;
  box-sizing: border-box;
  z-index: 1;
  overflow: hidden;
}
.boxLeft {
  background-color: red;
}
.blHeader {
  text-align: right;
}
.boxLeft:hover {
  background-color: orange;
  width: 100%;
  transition: .5s;
}
.boxLeft:hover ~ .boxRight {
  z-index: auto;
}
.boxLeft:hover > .blHeader {
  text-align: left;
}
.boxLeft:hover > .blCon {
  display: block;
}
.blCon,
.brCon {
  display: none;
}
.boxRight {
  background-color: blue;
  right: 0;
}
.boxRight:hover {
  background-color: green;
  width: 100%;
  transition: .5s;
}
.boxRight:hover > .brHeader {
  text-align: left;
}
.boxRight:hover > .brCon {
  display: block;
  transition: .5s;
}

<div id="box">
  <div class="boxLeft">
    <h2 class="blHeader">Left Header</h2>
    <p class="blCon">Left content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
      repudiandae cumque!</p>
  </div>
  <div class="boxRight">
    <h2 class="brHeader">RIght Header</h2>
    <p class="brCon">Right content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
      repudiandae cumque!</p>
  </div>
</div>