jQuery. 이것을 호버에 적용하십시오.

Question

"이"id/img의 공중에 "빠른 구매"아이콘을 표시하려고합니다. 이 빠른 구매 아이콘이 모든 이미지에 표시되는 것을 원하지 않습니다. 그냥 위에 올려 놓은 이미지 만 표시하면됩니다.

<div id="comp-imageprince" class="image" style="height: 260px;"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><a href="/dresses/mandy-strappy-bandeau-layered-bodycon-dress/invt/azz50430"> <div class="overDIV" style="display:none;position: absolute;right: 5px;"></div> 

<div id="QuickBuyProdBox"><p>test</p></div> 

그러나 이것은 완전히 잘못된 것입니다 단순히 DIV ID 다음에 이미지를 복제한다 "QuickBuyProdBox"

jQuery를 :

jQuery('#main_cat_prods').delegate('img', 'hover', function(){ 
    jQuery("#QuickBuyProdBox").append($(this).clone()); 
}); 

HTML

지금까지 나는이 있습니다 . 나는 여기에 클론의 사용을 오해했다고 생각한다! 또한이 기능은 마우스를 올리거나 마우스를 올리면 실행되며, 사용자가 마우스를 올리면 작동하고 사용자가 마우스를 가리면 사라집니다.

내가해야 할 일 : div id "comp-imageprince"의 맨 위 또는 위에 "div"라는 제목의 아이디 "QuickBuyProdBox"가 표시됩니다. 그런 다음 사용자가 div에서 커서를 제거하면 다시 숨기려면 div가 필요합니다.

어떤 조언이 필요합니까?

많은 감사, 마일스 다음과 같은 솔루션 사용하여 해결

:

jQuery('#main_cat_prods').delegate('img', 'mouseenter', function(){ 
       var $skuID = this.src.match(/[a-z][a-z][a-z]\d\d\d\d\d/)[0]; 

      if (!jQuery('#QuickBuyProdBox').length) { 
       jQuery(this).closest('.image').prepend('<div id="QuickBuyProdBox" style="width:50px; height:50px; position:absolute; background-color:red; cursor:pointer;">'); 
      }; 
       jQuery("#QuickBuyProdBox").click(function(){ 
        jQuery.event.trigger('lightbox', $skuID); 
       }); 
       jQuery('.image, #QuickBuyProdBox').mouseleave(function(){ 
       jQuery('#QuickBuyProdBox').remove(); 
      }); 
     }); 

Answer 1

이 안된입니다,하지만 ...

jQuery('#main_cat_prods img').hover { 
    function() { 
     jQuery(this).append(jQuery('#QuickBuyProdBox').clone()); 
    }, function() { 
     jQuery(this).find('#QuickBuyProdBox').remove(); 
    } 
}); 

터치 스크린 장치에서 호버 이벤트가 올바르게 실행되지 않을 수도 있습니다. 이 경우 자신의 관심사인지 확실하지 않지만 염두에 두어야 할 가치가 있습니다.

Answer 2

사용 mouseenter 대신 호버 :

jQuery('#main_cat_prods').delegate('img', 'mouseenter mouseleave', function(event){ 
    jQuery(this).toggle(event.type === 'mouseenter'); 
    jQuery("#QuickBuyProdBox").append($(this).clone()); 
}); 

Answer 3

CSS를 사용해보십시오. 정말 간단하고 안정적이며 빠릅니다.

여기 내 예를 확인 : http://jsfiddle.net/rzVjW/3/

일반 HTML :

<div class="buy-box"></div> 
<input type="button" class="buy-button" value="My Button"/> 

일반 CSS를 :

이

.buy-box{ 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 50px; 
    background-color: #FF99D5; 
    margin: 5px; 
} 

.buy-box + .buy-button{ 
    visibility: hidden; 
    position: relative; 
    bottom: 0; 
    left: 0; 
} 

.buy-box:hover + .buy-button{ 
    visibility: visible; 
}