Question

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

HTML和CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

我确定我只是错过了一些东西，但我已经对它进行了数小时的破解。提前致谢。这是一个笔链：http://goo.gl/l2eqG0

Answer 1

选择器.boxRight:hover ~ .boxLeft未按预期工作，因为通用兄弟组合子~仅选择以下兄弟元素。由于元素.boxLeft位于元素.boxRight之前，因此将鼠标悬停在元素.boxLeft上时，不会选择任何内容并隐藏元素.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>

模仿兄弟元素对其他兄弟姐妹的影响的问题

1 个答案: