CSS3:父元素内部有悬停的动画元素

Question

<div style="width: 310px; height: 160px; position: relative;" class="feature-box">                          
    <a href="" style="display: block; width: 310px; height: 160px; position: relative;">
        <div class="feature-box-link">My Service</div>
    </a>
</div>

我想做的是CSS3 transition a内的div......因此，当您hover feature-box a:hover .feature-box-link动画时：

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
line-height: 19px;

自：

line-height: 50px;
background: #FF9E00;
background: rgba(255, 158, 0, 0.75); 
height: 40px;

Answer 1

试试这个 - 演示

.feature-box a .feature-box-link {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    line-height: 19px;
}
.feature-box a:hover .feature-box-link  {
    line-height: 50px;
    background: #FF9E00;
    background: rgba(255, 158, 0, 0.75);
    height: 40px;
}