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

试试这个 - 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; 
}