Question

我试图在“this”id / img悬停时显示“快速购买”图标。我不希望这个快速购买图标显示在所有图像上，只是悬浮在图像上的图像。

到目前为止，我有这个：

jQuery的：

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

HTML：

<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“QuickBuyProdBox”之后克隆图像。我想我在这里误解了克隆的使用！此外，这是在悬停和悬停时触发，我只需要在用户悬停时工作，然后在用户徘徊时消失。

我需要它做什么：在div id“comp-imageprince”之上或之后悬停show div id“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

使用mouseenter而不是hover：

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

Answer 2

这是未经测试的，但是......

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

但是，悬停事件可能无法在触摸屏设备上正确触发。在这种情况下，不确定这是否属于你的问题，但值得记住。

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

jQuery。暂停这个

3 个答案: