Div 在悬停过渡时消失

Question

我的 CSS;

有一些问题

右侧 div 在悬停过渡开始时随其内容一起消失，并在过渡（您看不到）完成时重新出现。我想重新创建与左侧 div 过渡相同的过渡，但然后从右侧开始。

另外，当左边的 div 调整大小时，右边的 div 也会消失。

有什么想法吗？

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

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

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

好的，他就是我做的，不确定它是否是您要找的：

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 4

看到这个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 5

我想你需要像这样调整位置（和左、右）：

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 6

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

对于左侧，您只需要兄弟select或：

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>

Answer 7

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

Div 在悬停过渡时消失

Div disappears on hover transition

html

css

transition

看到这个fiddle