显示和隐藏jQuery中的div

Question

我正面临一个问题，问题是我有一个显示图像缩略图的产品页面，我希望当用户将鼠标悬停在任何缩略图上或将鼠标悬停在任何缩略图上时，相关的“添加到购物车”按钮应出现，当我将鼠标悬停在所有产品上时均处于当前状态出现“添加到购物车”按钮，链接为： http : //etekstudio.org/demo/crateen/en/men编码为：

jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
            jQuery('.popUpPrice button ').show();
        });
    });

Answer 1

我会选择这样的东西：

jQuery(document).ready(function(){
    jQuery(".product-image").hover(function(){
        jQuery(this).find(".popupPrice button").show();
    }, function() {
        jQuery(this).find(".popupPrice button").hide();
    });
});

这样，它也会在鼠标退出时将其隐藏。

Answer 2

尝试使用：

jQuery(document).ready(function(){
    var target = jQuery('.product-image');
    target.mouseenter(function(){
        jQuery(this).find('.popUpPrice button').show();
    });
});

target也已经是一个jQuery对象。 您可以只使用target.mouseenter而不是jQuery(target).mouseenter

Answer 3

尝试这个：

jQuery(".product-image").mouseenter(function(){
    jQuery('.popUpPrice button').show();
});

在jQuery中使用悬停

jQuery(".product-image").hover(
  function() {
           jQuery('.popUpPrice button ').show();
    }, function() {
            jQuery('.popUpPrice button ').hide();
    }
);

Answer 4

尝试这个 ：

jQuery(document).ready(function(){
         jQuery('.product-image').hover(function(){
                jQuery(this).next('.popUpPrice').find('button').show();
         },function(){
                jQuery(this).next('.popUpPrice').find('button').hide();
         });
    });

Answer 5

试试吧。

而且您也不需要创建名称为target新对象。您也可以直接使用这种方法。

jQuery(document).ready(function(){
    jQuery('.product-image').mouseenter(function(){
        jQuery(this).find('.popUpPrice button').show();
    });
});

Answer 6

尝试这个

$('.product-image').hover(function(){
$(this).next('.popUpPrice').find('.disc button').show();
},function(){
$(this).next('.popUpPrice').find('.disc button').hide();
});

演示

Answer 7

您可以尝试以下方法：

jQuery(document).ready(function(){
     var target = jQuery('.product-image'); 
     target.each (function () {
         jQuery(this).mouseenter(function(){
              jQuery(this).find('.popUpPrice button').show()
         });
     });

});

Answer 8

在函数内部

您要通过“ .popUpPrice button”选择所有元素，则必须找到要显示的正确按钮。

在此html结构中，例如：

<div class="product">
    <div class="product-image><img src="" /></div>
    <div class="popUpPrice"><button>Add to cart</button></div>
</div>

您要做的就是：

jQuery('.product-image').mouseenter(function(evt) {
    var target = jQuery(evt.currentTarget);
    target.parent().find('.popUpPrice button').show();
});

evt.currentTarget是触发事件的元素。 在这种情况下，始终是.product-image