인버트 호버 상태

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