1

だから私はホバーでCSSフェードアニメーションを持っています。

ここのホームページの6つの長方形のボタンをチェックしてください：http：//athenasweb.com

ul内のliの1つにカーソルを合わせると。ボックスのタイトルがアニメーション化されている青い領域。ただし、IEでは、アニメーションなしで完全に白に切り替わります。

そこで、私はjQuery（私はjQuery noobです）を使用して、IEでのみそれを修正しようとしました

<!--[if IE 9]>
        <script>
            $("ul#home_blocks li").hover(function(){$(this).next('span');.fadeOut(150);$(this).next('span');.fadeIn(300);});
        </script>
<![endif]-->

ただし、効果はありません

以下のこのコードは機能します！ただし、li全体ではなくスパンにカーソルを合わせた場合にのみ機能します。スパンを削除すると、ブロック全体がアニメーション化されますが、これは私がやろうとしていることではありません。

<!--[if IE 9]>
        <script>
            $("ul#home_blocks li span").hover(function(){$(this).fadeOut(150);$(this).fadeIn(300);});
        </script>
<![endif]-->

今日の午後、スタッカーに何かアドバイスはありますか？:)

HTMLとCSSは次のとおりです。

<ul id="home_blocks">

        <li> 
            <a href="http://athenasweb.com/category/aspects/" title="Check out Weekly Aspects"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_aspects.jpg" alt="Weekly Aspects"/> 
            <span class="block_title">Weekly Aspects</span></a>
        </li>

        <li>
            <a href="http://athenasweb.com/category/daily-planets/" title="Check out Daily Planets"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_planets.jpg" alt="Daily Planets"/>
            <span class="block_title">Daily Planets</span></a>
        </li>

        <li>
            <a href="http://athenasweb.com/category/column/" title="Read the Column"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_column.jpg" alt="Column"/>
            <span class="block_title">Column</span></a>
        </li>

        <li>
            <a href="http://www.athenasweb.com/astro101.html" title="Learn some Astrology"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_astrology.jpg" alt="Astrology 101"/>
            <span class="block_title">Astrology 101</span></a>
        </li>

        <li>
            <a href="http://www.athenasweb.com/athena.html" title="Learn about Athena"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_athena.jpg" alt="Athena"/>
            <span class="block_title">Athena</span></a>
        </li>

        <li>
            <a href="http://www.athenasweb.com/hitsIII.html" title="Learn some Mythology"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_mythology.jpg" alt="World Mythology"/>
            <span class="block_title">World Mythology</span></a>
        </li>
     </ul>

CSS：

#home_blocks            { position: relative; margin-top: 20px; list-style: none; }
    #home_blocks li         { position: relative; display: block; float: left; margin: 0 15px 20px 0; width: 310px; height: 401px; border-bottom: 1px solid #4098db; text-align: center; font-family: 'Raleway', sans-serif; font-size: 25px; font-weight: 900; background: #4098db; 
    /*opacity: 1.0; 
    filter:alpha(opacity=100); */
    -webkit-transition: background .2s; -moz-transition: background .2s; -ms-transition: background .2s; transition: background .2s; }
    #home_blocks a          { color: white;  text-shadow: 0 1px 0 #666; }
    #home_blocks li:nth-child(3n) { margin: 0 0 20px 0; }
    #home_blocks li a       { -webkit-transition: color 1s; -moz-transition: color 1s; -ms-transition: color 1s; transition: color 1s; }
    #home_blocks a:hover    { color: #4098db; text-shadow: 0 1px 0 #ccc; cursor: pointer; }
    #home_blocks li:hover   { 
        background: white; border-bottom: 1px dotted #4098db; 
        /*opacity:0.95; filter:alpha(opacity=95); */
    }
    .block_title            { display: block; position: absolute; bottom: 0px; left: 0; padding:25px 0 20px 0; width: 310px; z-index: 999; }
    .blocks                 { z-index: 1; }
4

2 に答える 2

1

これは、CSS3トランジションがIE9では機能しないためです。自分のやり方を実装したい場合は、IEでcssホバーを無効にすることも処理する必要があります。これは良い考えではないと思います。

css3transitions-jqueryなどのクロスブラウザ遷移ライブラリを使用することをお勧めします。

http://addyosmani.com/blog/css3transitions-jquery/

于 2013-02-04T20:00:20.467 に答える
0

Jqueryイベントハンドラーの「this」キーワードには、常にホバーされたアイテムが含まれます。これは、<li>要素全体です。したがって、jQueryで、セレクターのスパンを削除します。次に、「animate」呼び出しで、$（this）.filter（ "span"）。fadeOut（150）を実行して、スパンのみをアニメーション化します。

于 2013-02-04T19:31:42.303 に答える