1

我有多个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();
});
4

4 回答 4

1

我只想显示当前我悬停的元素。

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

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

但

默认情况下它们是隐藏的。

你如何悬停它们？

于 2013-04-22T02:07:52.597 回答
1

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

#results .prod_desc {
  display: none;
}

#results:hover .prod_desc {
  display: block;
}
于 2013-04-22T02:10:13.837 回答
0

如果这些是动态添加的，试试这个

jQuery(document).on('hover', '#results', function () {
    jQuery("span.prod_desc").show();
}, function(){
    jQuery("span.prod_desc").hide();
});
于 2013-04-22T14:58:27.010 回答
0

这解决了我的问题

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 调用返回之前进行了检查。所以使用它我正在等待它完成，然后实施进一步的检查。感谢大家对它的调查。

于 2013-05-03T17:08:56.823 回答