0

CSS トランジションを使用して、カーソルを合わせたときに背景画像がメニューにフェードインするようにしようとしています。フェードするのに約2秒かかります。Firefox では完全に機能しますが、他のすべてのブラウザではすぐに表示されます。IE ではまったく動作しませんが、動作するとは思っていなかったので心配していません。

CSS レイアウト

.mainmenu ul li{
    height: 86px;
    display: inline-block;
    margin: 0;
    padding: 0;
    z-index:1000;
    position: relative;
}
.mainmenu li:after{
    content: "";
    opacity: 0;
    -webkit-transition: opacity 1.5s;
    -moz-transition:    opacity 1.5s;
    -o-transition:      opacity 1.5s;
    -ms-transition:     opacity 1.5s;
    transition:         opacity 1.5s;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}
.mainmenu li:hover:after{
        opacity: 1;
}

CSS の外観

.mainmenu li:after{
    background: url(../images/hover.png) no-repeat center bottom;
}

HTML

<div class="mainmenu"><ul><li><a href=''>Home</a></li><li><a href=''>About Us</a></li><li><a href=''>Contact Us</a></li><li><a href=''>Blog</a></li><li><a href=''>Gallery</a></li></ul></div>

誰でも助けることができますか？IE とは別に、画像を表示することはできますが、Chrome、Safari、Opera でフェードインが機能すると便利です。それができたら、IEのことも考えられるかもしれません。

4

2 に答える 2

2

@Tyriar が述べているように、生成されたコンテンツでのトランジション/アニメーションのサポートはまだらです。最新の Chrome Canary (バージョン 27.0.1444.3) で動作するので、すぐに通常のチャネルに追加されます。それが上陸すると、これは IE10、Firefox 4+、および Chrome でサポートされます。Safari (および Opera、ただしWebKit への移行により変更される可能性があります) の注目すべき例外があります。

現時点で最も確実な解決策は、コンテンツを移行しようとするのを避け:after、代わりに既存の要素の 1 つに適用することです。これにより、68% のかなり優れたブラウザー サポートが得られます。

これが元の例のフォークです。生成されたコンテンツを使用するのではなく、CSS を次のように単純化しました。

.mainmenu li {
    position: relative;
    display: inline-block;
    height: 86px;
    margin: 0;
    padding: 0;
    background: url(http://placekitten.com/g/100/100) no-repeat center bottom;
}

.mainmenu li a {
    position: relative;
    display: block;
    height: 100%;
    background: #fff;
    transition: all 1.5s ease-in-out;
}

.mainmenu li a:hover {
    background: transparent;
}

ここでは、トランジションはaそれ自体で行われ、同じ効果を得るために白から透明にフェードします。

于 2013-03-19T12:42:31.583 に答える
0

前述のように、:psuedo要素のCSS遷移は最大のサポートを持っていません。 http://css-tricks.com/transitions-and-animations-on-css-generated-content/

ストレートhtml/cssを使用すると、これを行うことができますが、追加の要素を平手打ちする必要があります。ここに簡単なフィドルがあります：http: //jsfiddle.net/9uwVb/

于 2013-03-19T12:48:23.890 に答える