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

试试这个 -演示

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