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 div中的a ...所以当你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

试试这个 - DEMO

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