Question

我有多个span个元素具有相同的prod_desc类，默认情况下它们是隐藏的。现在我正在显示悬停，但问题是所有这些都显示出来了！

我只想要显示当前我正在悬停的元素。我想我需要使用它，但我无法弄清楚如何。

父元素：

    <div id="results" style="width: 600px;"></div>

使用AJAX将这些元素渲染到结果id元素中。

<div class="prod" style="position: relative;width: 265px;border: 1px solid black;float: left;margin-right: 20px;margin-bottom: 5px;">
<img src="'.$_product->getImageUrl().'"/>
<span class="prod_desc" style="position: absolute;display:none;">Hello I am descripton span block
</span>        
</div>

jQuery的：

jQuery("div#results").hover(function(){
    jQuery("span.prod_desc").show();
},function(){
    jQuery("span.prod_desc").hide();
});

我也尝试了这个，但它不起作用：

jQuery("div#results").hover(function () {
    jQuery(this).find("span.prod_desc").show();
}, function(){
    jQuery(this).find("span.prod_desc").hide();
});

Answer 1

我只希望显示当前正在悬停的元素。

然后只需将悬停功能附加到您想要的元素。

jQuery("span.prod_desc").hover(function(){
    jQuery(this).show();
     },function(){
   jQuery(this).hide();
 });

<强> BUT

默认隐藏它们。

你是如何盘旋他们的？

Answer 2

只需使用CSS。我认为问题可能在于如何将元素放置在页面上以及jQuery事件如何工作。尝试使用CSS规则，看看它是如何工作的。

#results .prod_desc {
  display: none;
}

#results:hover .prod_desc {
  display: block;
}

Answer 3

如果动态添加，请尝试此

jQuery(document).on('hover', '#results', function () {
    jQuery("span.prod_desc").show();
}, function(){
    jQuery("span.prod_desc").hide();
});

Answer 4

这解决了我的问题

jQuery(document).ajaxComplete(function(){
if(jQuery('.prod').length != 0) {
    jQuery(".prod").hover(function(){
    jQuery(this).find(".prod_title").hide();
    jQuery(this).find(".prod_desc").fadeIn();
},function(){        
jQuery(this).find(".prod_desc").fadeOut(); 

jQuery(this).find(".prod_title_wrap").show();
jQuery(this).find(".prod_title").show();
});

}

在ajax电话回来之前，我正在检查。所以使用这个我等待它完成然后实施进一步的检查。谢谢大家的好评。

在悬停时显示子元素，并在不悬停时隐藏

4 个答案: