2

ネストされた div を含むリストがあり、2 つの画像が完全に重なり合っています。スムーズなトランジション効果を生み出すホバー効果を確立しました。ただし、効果はマウスが画像の上にある場合にのみトリガーされ、マウスがリンクの上にある場合はトリガーされません。簡単なアイデアのコードは次のとおりです。

<ul id="shortcuts" class="sitewidth">
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="shortcuticon box">
                <img src="images/icon-learn.png" alt="" class="a">
                <img src="images/icon-learn-hover.png" alt="" class="b">
            </div>
            <h2>Hello World!</h2>
        </a>
    </li>

    <script type='text/javascript'>
        $(document).ready(function(){
            $("img.a").hover(function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            }, function() {
                $(this).stop().animate({"opacity": "1"}, "slow");
            });
        });
    </script>
</ul>

#shortcuts li a画像自体ではなく、ホーブ機能を実行する必要があることを認識しています。しかし、このコードは機能しており、私が探しているものの大まかなアイデアが得られます。あなたの親切な助けに感謝します。

4

3 に答える 3

2

これを試してみてください:- どのように表示したいか正確にはわかりませんが、ここに私の試みがあります。

画像は1枚のみ*

http://jsfiddle.net/tQwDk/

どちらの画像も

http://jsfiddle.net/GcJG5/

 $("#shortcuts li").hover(

function () {
    $('img.a', this).stop().animate({
        "opacity": "0"
    }, "slow");
},

function () {
    $('img.a', this).stop().animate({
        "opacity": "1"
    }, "slow");
});
于 2013-04-23T05:16:57.010 に答える
0

試す

$(document).ready(function() {
    $("a").has('img.a').hover(function() {
            $('img.a', this).stop().animate({
                        "opacity" : "0"
                    }, "slow");
        }, function() {
            $('img.a', this).stop().animate({
                        "opacity" : "1"
                    }, "slow");
        });
});
于 2013-04-23T05:31:54.783 に答える