Question

我想知道，当我将鼠标悬停在按钮上时，如何添加转换。我把它作为一个精灵。有两个单独的图像，我可以进行转换...是否有一个很好的方法来实现这一点，所以我使用精灵保存服务器请求。

.udfyld_data input[type="button"] { 
    background:url(../../images/kurv/til-betaling-knap.png) no-repeat; 
    width:192px; 
    height:37px;
    border:0;  
    cursor:pointer;
}

.udfyld_data input[type="button"]:hover { 
    background-position: 0 -37px;
    display:block;
}

Answer 1

添加css3 transition属性

transition: [duration] [property] [timing-function]

所以你的代码将是这样的：

.udfyld_data input[type="button"] { 
    .....
    transition: 1s background linear;
    /*For browser compatibility*/
    -moz-transition: 1s background linear;
    -webkit-transition: 1s background linear;
}

<强>已更新

使用div代替input按钮

HTML ：<div class="button"><span></span></div>

我为一些黑客添加了一个范围

选中 DEMO

输入[type =“button”] sprite hover有转换问题

1 个答案: