在CSS中使用淡出淡出的悬停在悬停在悬停的地方

Question

我有一个简单的hide/show toggle，它在徘徊时会逐渐淡出/输出文本。唯一的问题是，我不希望它是Invisble(因为它占用了不必要的空间(。但是当我添加显示元素时，淡出函数不再起作用。

#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

没有褪色动画，但在悬停而不会占用空间JSFIDDLE

时出现

是否可以在没有文本不可见的情况下维护淡出动画？

Answer 1

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

请参阅代码片段波纹管：

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

，如果您希望它总是没有空间，则可以使用绝对位置摆脱文档的流程

请参阅代码段：

#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

我会将您的divs包裹在另一个框中，然后绝对放置您的隐藏文本，以免占用任何空间 - 在代码中注释以解释发生了什么

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