Question

我的CSS有些问题;

正确的div在其悬停转换开始时会随着内容消失，并在转换（您无法看到）完成时重新出现。我想重新创建与左div过渡相同的内容，但是从右边重新创建。

此外，当左侧div调整大小时，右侧div也会消失。

有什么想法吗？

＆＃13;

body {
  margin: 0;
  overflow-y: hidden;
}
div.right {
  width: 50vw;
  height: 100vh;
  float: right;
  background-color: #8B9ECF;
  transition: width 1s;
}
div.left {
  width: 50vw;
  height: 100vh;
  float: left;
  background-color: #A0DB75;
  transition: width 1s;
}
div.right:hover {
  width: 70vw;
}
div.left:hover {
  width: 70vw;
}
p {
  text-align: center;
  vertical-align: middle;
  line-height: 120vh;
  color: white;
  font-family: sans-serif;
  font-size: 250%;
}

＆＃13;

<body>
  <div class="left">
    <p>Left</p>
  </div>
  <div class="right">
    <p>Right</p>
  </div>
</body>

＆＃13;

Answer 1

问题是，在悬停时它会变大，不再适合，所以它会显示在左侧元素下方。可以把它想象成一个太长的单词而不是包装。

Answer 2

因为没有足够的空间，你的正确的div正在倒下。

看看下面的代码段中的50vh块时会发生什么。

考虑使用absolute或fixed定位，但我不知道这是否是您想要的效果：http://jsfiddle.net/7w2265fL/

body {
  margin: 0;
  overflow-y: hidden;
}
div.right {
  width: 50vw;
  height: 50vh;
  float: right;
  background-color: #8B9ECF;
  transition: width 1s;
}
div.left {
  width: 50vw;
  height: 50vh;
  float: left;
  background-color: #A0DB75;
  transition: width 1s;
}
div.right:hover {
  width: 70vw;
}
div.left:hover {
  width: 70vw;
}
p {
  text-align: center;
  vertical-align: middle;
  line-height: 120vh;
  color: white;
  font-family: sans-serif;
  font-size: 250%;
}

<body>
  <div class="left">
    <p>Left</p>
  </div>
  <div class="right">
    <p>Right</p>
  </div>
</body>

Answer 3

JSFiddle

另一种方法是添加一个额外的div

<body>
  <div class="container">  
      <div class="left">
        <p>Left</p>
      </div>
      <div class="right">
        <p>Right</p>
      </div>
  </div>
</body>

并使用以下CSS

.container:hover div.right,
.container:hover div.left   {
  width: 30vw;
}

div.right:hover {
  width: 70vw !important;
}

div.left:hover {
  width: 70vw!important;
}

div.left:hover + div.right {
  width: 30vw;
}

完整的CSS：

body {
  margin: 0;
  overflow-y: hidden;
}
div.right {
  width: 50vw;
  height: 100vh;
  float: right;
  background-color: #8B9ECF;
  transition: width 1s;
}
div.left {
  width: 50vw;
  height: 100vh;
  float: left;
  background-color: #A0DB75;
  transition: width 1s;
}

.container:hover div.right,
.container:hover div.left   {
  width: 30vw;
}

div.right:hover {
  width: 70vw !important;
}

div.left:hover {
  width: 70vw!important;
}

div.left:hover + div.right {
  width: 30vw;
}

p {
  text-align: center;
  vertical-align: middle;
  line-height: 120vh;
  color: white;
  font-family: sans-serif;
  font-size: 250%;
}

Answer 4

好吧，他就是我所做的，不确定这是不是你想要的：

https://jsfiddle.net/9c1pju8p/1/embedded/result/

<body>
<div class="left">
<p>Left</p>
</div>
<div class="right">
<p>Right</p>
</div>
</body>

body {
  margin: 0;
  overflow-y: hidden;
}
.right {
    position: absolute;
   display : block;
    z-index: 2;
  width: 50vw;
    float: right;
    left: 50vw;
  height: 100vh;
  background-color: #8B9ECF;
  transition: width 1s;
}
.left {
    position: absolute;
    z-index: 1;
    display: block;
  width: 50vw;
  height: 100vh;
  float: left;
  background-color: #A0DB75;
  transition: width 1s;
}
div.right:hover {
  width: 70vw;
}
div.left:hover {
  width: 70vw;
}
p {
  text-align: center;
  vertical-align: middle;
  line-height: 120vh;
  color: white;
  font-family: sans-serif;
  font-size: 250%;
}

Answer 5

请参阅此fiddle

我用于.left和.right的CSS如下所示

div.right {
    width: 50vw;
    height: 100vh;
    position: absolute;
    right: 0;
    background-color: #8B9ECF;
    transition: width 1s;
}
div.left {
    width: 50vw;
    height: 100vh;
    position: absolute;
    left: 0;
    background-color: #A0DB75;
    transition: width 1s;
}

同样，:hover的css如下

div.right:hover {
    width: 70vw;
    z-index:999;
}
div.left:hover {
    width: 70vw;
    z-index:999;
}

我所做的就是，我已经从你的CSS中删除了花车，而是完全定位了div。试试吧..

Answer 6

我猜你需要玩这个位置（和左，右），就像这样：

body {
  margin: 0;
  overflow-y: hidden;
}
div.right {
  width: 50vw;
  height: 100vh;
  float: right;
  background-color: #8B9ECF;
  transition: width 1s;
}
div.left {
  width: 50vw;
  height: 100vh;
  float: left;
  background-color: #A0DB75;
  transition: width 1s;
}
div.right:hover {
  width: 70vw;
  position:absolute;
  right:0;
}
div.left:hover {
  width: 70vw;
  position:absolute;
  left:0;
}
p {
  text-align: center;
  vertical-align: middle;
  line-height: 120vh;
  color: white;
  font-family: sans-serif;
  font-size: 250%;
}

<body>
  <div class="left">
    <p>Left</p>
  </div>
  <div class="right">
    <p>Right</p>
  </div>
</body>

Answer 7

如果您正在使用JS / jQuery解决方案，这是完全可能的。您可以使用纯CSS使左侧悬停正常工作，但由于无法在CSS中选择以前的元素，因此需要JS使右侧工作。

对于左侧，您只需要兄弟选择器：

div.left:hover ~ div.right
{
    width: 30vw;
}

对于右侧，您需要以下JS：

$(function(){
    $("div.right").hover(function(){
        $("div.left").addClass("rhovered");
    }).mouseout(function(){
        $("div.left").removeClass("rhovered");
    });
});

body {
  margin: 0;
  overflow-y: hidden;
}
div.right {
  width: 50vw;
  height: 100vh;
  float: right;
  background-color: #8B9ECF;
  transition: width 1s;
}
div.left {
  width: 50vw;
  height: 100vh;
  float: left;
  background-color: #A0DB75;
  transition: width 1s;
}
div.right:hover {
  width: 70vw;
}
div.left:hover {
  width: 70vw;
}
div.left:hover ~ div.right
{
  width: 30vw;
}
div.left.rhovered
{
  width: 30vw;
}
p {
  text-align: center;
  vertical-align: middle;
  line-height: 120vh;
  color: white;
  font-family: sans-serif;
  font-size: 250%;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
  <div class="left">
    <p>Left</p>
  </div>
  <div class="right">
    <p>Right</p>
  </div>
</body>

Div在悬停过渡时消失

7 个答案:

请参阅此fiddle