[英]Show and hide a div in jquery
I'm facing an issue, issue is I've a product page where image thumbnails are appearing, i want when user hover or mouseenter on any thumnail the associated 'add to cart' button should appear, current when i mouseenter on any product all 'add to cart' buttons are appearing, link is: http://etekstudio.org/demo/crateen/en/men cod is: 我正面临一个问题,问题是我有一个显示图像缩略图的产品页面,我希望当用户将鼠标悬停在任何缩略图上或将鼠标悬停在任何缩略图上时,相关的“添加到购物车”按钮应出现,当我将鼠标悬停在所有产品上时均处于当前状态出现“添加到购物车”按钮,链接为: http : //etekstudio.org/demo/crateen/en/men编码为:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
jQuery('.popUpPrice button ').show();
});
});
I'd go with something like this: 我会选择这样的东西:
jQuery(document).ready(function(){
jQuery(".product-image").hover(function(){
jQuery(this).find(".popupPrice button").show();
}, function() {
jQuery(this).find(".popupPrice button").hide();
});
});
That way it hides it on mouse exit as well. 这样,它也会在鼠标退出时将其隐藏。
Try to use: 尝试使用:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
Also target
is already a jQuery object. target
也已经是一个jQuery对象。 You can just use target.mouseenter
instead of jQuery(target).mouseenter
您可以只使用target.mouseenter
而不是jQuery(target).mouseenter
Try this: 尝试这个:
jQuery(".product-image").mouseenter(function(){
jQuery('.popUpPrice button').show();
});
use hover in jquery 在jQuery中使用悬停
jQuery(".product-image").hover(
function() {
jQuery('.popUpPrice button ').show();
}, function() {
jQuery('.popUpPrice button ').hide();
}
);
try this : 尝试这个 :
jQuery(document).ready(function(){
jQuery('.product-image').hover(function(){
jQuery(this).next('.popUpPrice').find('button').show();
},function(){
jQuery(this).next('.popUpPrice').find('button').hide();
});
});
Try it. 试试吧。
And you also don't have need to create new object with the name target
.You an do directly with this way also. 而且您也不需要创建名称为target
新对象。您也可以直接使用这种方法。
jQuery(document).ready(function(){
jQuery('.product-image').mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
You can try this: 您可以尝试以下方法:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.each (function () {
jQuery(this).mouseenter(function(){
jQuery(this).find('.popUpPrice button').show()
});
});
});
inside the function 在函数内部
you are selecting all elements with '.popUpPrice button', you must find the correct button to show. 您要通过“ .popUpPrice button”选择所有元素,则必须找到要显示的正确按钮。
in this html structure, for instance: 在此html结构中,例如:
<div class="product">
<div class="product-image><img src="" /></div>
<div class="popUpPrice"><button>Add to cart</button></div>
</div>
all you have to do is: 您要做的就是:
jQuery('.product-image').mouseenter(function(evt) {
var target = jQuery(evt.currentTarget);
target.parent().find('.popUpPrice button').show();
});
evt.currentTarget is the element which triggered the event. evt.currentTarget是触发事件的元素。 In this case will always be .product-image 在这种情况下,始终是.product-image
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.