Question

我有一组缩略图图像，现在当图像悬停时会出现一些文字，所以我要做的是反转这种行为，默认显示悬停的文本以及文本悬停时显示图像。

缩略图图像的标记是由一些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>

您可以看到实时版here：你能给我一些建议吗，提示我如何改变这个？

Answer 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();
            })

按顺序包含两个hover函数 - mouseenter和mouseleave。要反转悬停效果，只需交换这两个内部函数：

$("<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();
            })

反转悬停状态

1 个答案: