0

最初のcss-transitionsを作成しようとしていますが、機能しません。代わりに.btn-zen-inverse：hoverにトランジションを入れて、ショートコードを使用してみました。なぜ機能しないのですか？（最新バージョンのchromeでテスト）

    .btn {
     color: white;
     font-family: 'ZLight';
     border: 2px solid white !important;
     box-shadow: 0 0 6px rgba( 12, 41, 63, 0.3);
     text-shadow: none;
     background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
     /* FF3.6+ */
     
     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
     /* Chrome10+,Safari5.1+ */
     
     background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
     /* Opera 11.10+ */
     
     background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
     /* IE10+ */
     
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
     /* W3C */
     
     filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#6bffffff', GradientType=0);
     /* IE6-9 */
     
     padding: 3px;
 }
 .btn:hover {
     transition: background-image 0.5s;
     transition: background-color 0.5s;
     -moz-transition: background-image 0.5s;
     /* Firefox 4 */
     
     -webkit-transition: background-image 0.5s;
     /* Safari and Chrome */
     
     -webkit-transition: background-color 0.5s;
     /* Safari and Chrome */
     
     -o-transition: background-image 0.5s;
     /* Opera */
     
     color: white;
 }
 .btn-zen-inverse {
     background-color: #273032;
 }
 .btn-zen-inverse:hover {
     background-image: none;
     background-color: #273032;
 }
<a class="btn btn-zen-inverse btn-large">
    <span>Prova Zenconomy Gratis</span>
</a>

4

1 に答える 1

3

まず、遷移定義は基本クラス定義の一部である必要があります

すなわち：

div {
   transition: background-color 0.5s;
}

それ以外の：

/* this is wrong */
div:hover {
   transition: background-color: 0.5s;
}

実際の変更「効果」は、必要に応じて、ホバー疑似クラスに配置されます。

このような：

div:hover {
    background-color: red;
}

および基本クラスの定義：

div {
    background-color: white;
}

そうは言っても、背景の「速記」スタイルを壊すことはできないと私は99.7％確信しています。基本クラスと疑似クラスの両方の定義で、移行しようとしている個々のスタイル（つまり、background-colorとbackground-image）を分離してみてください。

編集：どうやらあなたは「なし」にではなく、グラデーションを移行することができます。

于 2012-10-10T07:38:14.200 に答える