CSS3（过渡）不起作用

Question

当我将鼠标悬停在按钮上时，我正在尝试使用 css3 过渡效果更改背景和文本颜色，但只有文本颜色发生变化，而不是背景颜色。这是我的 jsfiddle code，这是我的 CSS：

.input-submit
{
    margin: 12px 0 2px
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(224, 224, 224)));
    background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
    background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
    background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
    background-image: linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
    border: 0;
    font-weight: normal;
    color: #333;
    text-shadow: 0 1px 0 white;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
    width: 60px;
    border-image: initial;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

.input-submit:hover
{
    cursor:pointer;
    margin: 12px 0 2px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(145, 191, 1)), to(rgb(111, 149, 1)));
    background-image: -webkit-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
    background-image: -moz-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
    background-image: -o-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
    background-image: linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
    border: 0;
    font-weight: normal;
    color: #fff;
    text-shadow: 0 1px 0 white;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
    width: 60px;
    border-image: initial;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

Answer 1

您已经获得了相当多的 CSS！据我所知，目前还没有浏览器允许 css 渐变的过渡。由于您的背景不是纯色，因此您无法转换它们。