CSS3动画应该在悬停父级时显示隐藏元素?(可能的角度解决方案)

Question

我有一个Angular应用程序，其中有一些按钮在点击时会根据是否点击而改变颜色。

<div class="filter ng-click="seeButton()">
   <div class="filter-icon'"></div>
   <div class="filter-hover">
       <span class="filter-text">Se</span>
   </div>
</div>

然而，我有一位设计师，他喜欢网站上的一些动画。

我希望div类filter-hover在悬停父元素filter时显示自己。它应该从下往上展示自己。它位于div的底部，filter-hover应该留在div的底部。我使用Angular，我可以使用angular-animate。

我该如何做到这一点？

Answer 1

让我们为您提供一个快速的CSS类。如果元素a紧挨着元素b，如下所示：

<a id="a"></a>
<div id="b"></div>

您可以使用#a:hover + #b。如果b是a的后代，如下所示：

<a id="a">
  <div id="b"></div>
</a>

您可以使用#a:hover #b。如果a和b之间有元素，但它们在同一范围内：

<a id="a"></a>
<a></a>
<ol></ol>
<h1></h1>
<div id="b"></div>

您可以使用#a:hover ~ #b。

在您的情况下，您将像这样使用#a:hover #b：

.filter-hover {
  opacity: 0;
  transition: opacity 0.5s;
}
.filter:hover .filter-hover {
  opacity: 1;
}
.filter {
  background: grey;
}

<div class="filter" ng-click="seeButton()">
  <div class="filter-icon'"></div>
  <div class="filter-hover">
    <span class="filter-text">Se</span>
  </div>
</div>

Answer 2

DEMO

HTML

<div id="parent">
<div id="child">
</div>

CSS

#parent{
    width:200px;
    height:200px;
    background-color:tomato;
}
#child{
    width:50px;height:50px;
    background-color:yellow;
    display:none;
}
#parent:hover #child{
    display:block;
}

Answer 3

我喜欢使用这种技术http://jsfiddle.net/ps5nkpL5/1/简单地显示一个元素从一个方向生长或动画。javascript有更好的技术，但对于只使用css，我会这么做

.filter{
    height: 100px;
    width: 300px;
    background: #dedede;
    position: relative;
}
.filter-hover{
    //background: #f1f1f1;
    text-align:center;
    height: 40px;
    position:absolute;
    overflow:hidden;
    width:75px;
    bottom:10px;
    right:10px;
}
.button{
    background: #252525;
    color:#ffffff;
    display:block;
    text-align:center;
    line-height:40px;
    position: absolute;
    width: 100%;
    bottom:-40px;
}
.filter:hover .filter-hover .button{
    bottom: 0px;
    -webkit-transition:  .5s;
    transition: .5s;
}