Question

我正在尝试使用无法正常工作的css添加过渡属性，我正在使用我的html＆amp; 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;
}

如果我在悬停属性上添加背景颜色，它会正常工作，但我想在haover.any想法中设置不透明度？ 我也在提供工作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

CSS过渡属性无法正常工作

1 个答案: