0

私は一連のサムネイル画像を持っています。画像をホバーするとテキストが表示されるので、この動作を反転させて、ホバーしたテキストをデフォルトで表示し、テキストをホバーして画像を表示します。

サムネイル画像のマークアップはいくつかの jquery 関数によって生成され、これが私を混乱させます。

コードは次のとおりです。

<?php if($orderby == 'date'){ ?>
            var fg_divthumbimg = $(this).parent().parent().parent();
            fg_divthumbimg.css({'display':'block'});
        <?php }else{ ?>
            var fg_divthumvsecdiv = $("<div>").addClass("hoverbgpfthnailmiddle").css({'float':'left', 'line-height':'0', 'background-color':'<?php echo get_option("bgchanger_color"); ?>'}).append($(this)); //fg_divthumbimgi
            var fg_divhoverbg = $("<div>").addClass("hoverbgpfthnail").css({"background-color" : (srcobj.color)?srcobj.color:"#008eeb" }).append(fg_divthumvsecdiv);
            var fg_divhoverbgmetadata = $("<div>").addClass("hoverbgpfthnailmetadata").html('<span class="thumb_title">'+srcobj.thumb_title+'</span><span class="thumb_cats">'+srcobj.thumb_cats+'</span><span class="thumb_plus">+</span>');//.append(fg_divthumvsecdiv);
            var fg_divthumbimg = $("<div>").attr("class","imgcontainer").attr('rel', srcobj.rel).css({'display':'block', 'visibility':'visible', 'width':'0', 'overflow':'hidden'}).append(fg_divhoverbg);
            fg_divthumbimg.append(fg_divhoverbgmetadata);

            var fg_divhoverbghover = $("<div>").addClass("hoverbgpfthnailiface").hover(function(e){
                g_hover_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            },function(e){
                g_hoverout_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            }).click(function(){
                fg_imgpreview.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"));
            });
            if(jQuery.browser.msie){
                fg_divthumbimg.click(function(){
                    fg_imgpreview.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"));
                }).hover(function(e){
                    g_hover_thumbnailsaltimg.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                    e.stopPropagation();
                },function(e){
                    g_hoverout_thumbnailsaltimg.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                    e.stopPropagation();
                });
                fg_divhoverbghover.unbind('click').unbind('hover');
            }

            fg_divthumbimg.append(fg_divhoverbghover);
            //fg_divthumvsecdiv.append(fg_divhoverbgmetadata);
            $(".imgscontainer").append(fg_divthumbimg);
        <?php } ?>

        //var fg_thumbimgpr = $(this).parent().parent(".imgcontainer");
        var fg_thumbimgpr = fg_divthumbimg;
        $(this).css({width: newimagewidth+'px'});
        fg_thumbimgpr.css({'visibility':'visible', width: newimagewidth+'px'});
        if(!navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/)){
            $(this).css({'opacity':0}).animate({'opacity':1}, 400);
        }

    };

そして、これはサムネイル用に生成された html コードです。

        <div class="imgcontainer" rel=" all july " style="overflow: hidden; display: block; visibility: visible; width: 306px; ">
    <div class="hoverbgpfthnail" style="background-color: rgb(130, 187, 228); opacity: 1; ">
    <div class="hoverbgpfthnailmiddle" style="float: left; line-height: 0; background-color: rgb(0, 0, 0); ">
    <img class="pf_img" id="post-id-3370" style="cursor: pointer; width: 306px; opacity: 1; " src="http://whiteandgold.ro/ipp/wp-content/themes/konzept/image.php?width=400&amp;height=300&amp;cropratio=4:3&amp;image=http://whiteandgold.ro/ipp/wp-content/uploads/2012/06/fiestadelaqua.jpg">
    </div></div>
    <div class="hoverbgpfthnailmetadata" style="display: block; top: -7.2486857142857275px; opacity: 0; left: -307px; ">
    <span class="thumb_title">Fiesta del Agua</span><span class="thumb_cats">JULY</span><span class="thumb_plus">+</span>
    </div>
    <div class="hoverbgpfthnailiface"></div>
    </div>

ここでライブバージョンを見ることができます：これを変更する方法についての提案やヒントを教えてください。

4

1 に答える 1

1

このブロック:

$("<div>").addClass("hoverbgpfthnailiface").hover(function(e){
                g_hover_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            },function(e){
                g_hoverout_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            })

2 つのhover関数 (mouseenter と mouseleave) がこの順序で含まれています。ホバー効果を反転するには、これら 2 つの内部関数を入れ替えるだけです。

$("<div>").addClass("hoverbgpfthnailiface").hover(function(e){
                g_hoverout_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            },function(e){
                g_hover_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);
                e.stopPropagation();
            })
于 2012-06-22T18:30:11.783 に答える