反转悬停状态

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和鼠标离开，以该顺序。反转悬停效果，只是交换这两个内部函数各地：

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