3

CSSで遷移プロパティが機能しない理由を一生理解できません。コードは次のとおりです。

#header #menu-top-nav ul li a {
    -webkit-transition: background-color 10s;
    -moz-transition: background-color 10s;
    -ms-transition: background-color 10s;
    -o-transition: background-color 10s;
    transition: background-color 10s;
}
#header #menu-top-nav ul li a:hover {
    background: #dddddd; /* Old browsers */
    background: -moz-linear-gradient(top,  #dddddd 0%, #d3d3d3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #dddddd 0%,#d3d3d3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
}

aタグの背景は、ホバリングする前は技術的に透明です (ただし、タグの背景にはulグラデーションがあります)。しかし、タグに背景色またはグラデーションを割り当ててもa、トランジションは機能しません。a:hover遷移コードをスタイルに入れてみました。background変数を toおよび to に変更しようとしましたbackground-imageが、成功しませんでした。

CSS でさらに多くのスタイルを使用していますが、Chrome でデバッグしており、競合する原因を見つけることができません。transition プロパティはどのブラウザーでも機能しないことに注意してください。

単純なジャムのように見えるものから私を助けてくれる人はいますか?

4

1 に答える 1

2

グラデーションは背景画像であり、背景色ではありません。したがって、背景色の遷移はグラデーションには影響しません。

背景画像の遷移は今のところサポートされていません。

于 2013-01-15T18:15:49.430 に答える