模仿一个同级元素对另一个同级元素的效果时出现问题

Question

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

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上时，不会选择任何内容，并且不会隐藏元素.boxLeft。

若要解决此问题，一种选择是在将鼠标悬停在父元素上时隐藏第一个元素#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>