CSS轉換屬性不能正常工作

Question

我想補充過渡使用CSS這是不正常財產，我給我的下面HTML & CSS代碼：

HTML：

<ul class="job-tile"> 
    <li style="background-color:#000" class="active" id="sw_start">Tile 1</li> 
    <li style="background-color:#000" class="active" id="sw_start">Tile 1</li> 
</ul> 

CSS：

.job-tile 
{ 
    position:relative; 
    list-style:none; 
    text-align:center; 
    display:block; 
    float:left; 
} 
.job-tile li 
{ 
    color: #FFFFFF; 
    display: inline-block; 
    font-size: 18px; 
    height: 22px; 
    margin: 12px; 
    padding: 50px 0; 
    position: relative; 
    width: 200px; 
    font-weight:normal; 
    cursor:pointer; 
    float:left; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
    border-radius: 3px; 
    transition: background-color 0.2s linear 0s, color 0.2s linear 0s; 
} 

.job-tile li:hover 
{ 
    opacity:1 !important; 
    filter:alpha(opacity=100) !important; 
    transition: background-color 0.2s linear 0s, color 0.2s linear 0s; 
} 

如果我把懸停屬性的背景顏色，它會正常工作，但我想把不透明度放在懸停。任何想法？ 我也給工作JS小提琴鏈接： - http://jsfiddle.net/4Qcr3/1/

Answer 1

的transition-property設置是不夠的（缺少opacity屬性），你應該使用all關鍵字。另外，transition沒有完全被所有瀏覽器中實現，你應該增加供應商前綴，使其發揮跨瀏覽器得好：

.job-tile li { 
    ... 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
} 

.job-tile li:hover { 
    opacity:1 !important; 
    filter:alpha(opacity=100) !important;  
} 

這裏是working fiddle