Hide/show 启用悬停淡入 css

Question

我有这个简单的 hide/show toggle 悬停时会淡化 in/out 文本。唯一的问题是，我不想让它隐形（因为它占用了不必要的space）。但是当我添加显示元素时，淡入淡出功能不再起作用。

#stuff {
  opacity: 0.0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
}

#hover {
  width: 150px;
  height: 10px;
  margin-bottom: 15px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
}

#hover:hover+#stuff {
  opacity: 1.0;
  display: inline-block;
}

`

<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>

带淡入淡出动画，但只是隐藏：jsfiddle

没有渐变动画，但在悬停时出现并且不占用 space jsfiddle

是否可以在文本不可见的情况下保持淡入淡出动画？

Answer 1

您可以使用 max-height 删除不需要的 space

请参阅下面的代码片段：

#stuff {
  opacity: 0.0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
  max-height:0;
}

#hover {
  width: 150px;
  height: 10px;
  margin-bottom: 15px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
}

#hover:hover+#stuff {
  opacity: 1.0;
  max-height:100%;
  
}

<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>

而如果你想让它一直不带space，你可以使用绝对位置让文档流出

查看代码片段：

#stuff {
  opacity: 0.0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
  position:absolute;
}

#hover {
  width: 150px;
  height: 10px;
  margin-bottom: 15px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
  
}
.wrapper{
  position:relative;
}
#hover:hover + #stuff {
  opacity: 1.0;   
}

<div class="wrapper">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
<div>

Answer 2

我会将您的 div 包装在另一个框中，然后绝对定位您的隐藏文本，这样它就不会占用任何空间 space - 代码中的注释来解释正在发生的事情

/* add a container */
.container {
  position: relative;
}

#stuff {
  opacity: 0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  color: black;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
  border-radius: 25px;
  width: 200px;
  display: inline-block;

  /* position stuff underneath the container */
  position: absolute;
  top: 100%;

  /* give the background a colour so you can't see anything below */
  background: #ffffff;
}

#hover {
  width: 150px;
  cursor: pointer;
  float: center;
  font-family: 'Open Sans', FontAwesome;
  font-weight: 600;
}

/* show stuff on hover of the container - so you can hover the stuff without it dissappearing */
.container:hover #stuff {
  opacity: 1;
}

`

<div class="container">
  <div id="hover">HOVER HERE</div>
  <div id="stuff">Revealed text</div>
</div>
Some content below

Hide/show 启用悬停淡入 css

Hide/show toggle on hover with fade in css

html

css

toggle