Css3過渡 - 懸停覆蓋元素

Question

我想在容器懸停時對元素進行簡單動畫。我不知道它應該如何用CSS語法編寫。

<article class="col-md-4 offer-box"> 
          <div class="media"> 
           <div class="media-left"> 
            <i id="icon" class="fa fa-paint-brush"></i> 
           </div> 
           <div class="media-body"> 
            <h4 class="media-heading" id="text-light">Web Design</h4> 
           <p class="text-muted">Pellentesque habitant 
            morbi tristique senectus et netus et 
            malesuada fames ac turpis egestas. 
            Vestibulum tortor quam, feugiat vitae, 
            ultricies eget, tempor sit amet, ante. 
            Donec eu libero sit amet quam egestas 
            semper. Aenean ultricies mi vitae est. 
            Mauris placerat eleifend leo.</p> 
           </div> 
          </div> 
         </article> 

#icon{ 
 
    color: #ef5925; 
 
    font-size: 35px; 
 
    transition-duration: 1s; 
 
} 
 
.offer-box:hover{ 
 
    #icon{ 
 
    color: #fff; 
 
    font-size: 40px; 
 
    } 
 
}

Answer 1

你的CSS語法是錯誤的。寫這樣的：

.offer-box:hover #icon{ 
    color: #fff; 
    font-size: 40px; 
} 

的jsfiddle：http://jsfiddle.net/AndrewL32/65sf2f66/72/