顯示懸停時的子元素，並在不懸停時隱藏

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

來源

2013-04-22 RIK

OMG現在爲什麼投降？ – RIK 2013-04-22 01:56:06

你可以發佈一些HTML標記嗎？ – tymeJV 2013-04-22 02:03:16

我已編輯幷包含html – RIK 2013-04-22 02:04:51

這解決了我的問題

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-03 17:08:56 RIK

我只想要的元素顯示在目前我徘徊。

然後只是將懸停功能附加到你想要的元素。

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

但

它們默認是隱藏的。

你怎麼徘徊他們？

來源

2013-04-22 02:07:52 egig

還沒有顯示全部 – RIK 2013-04-22 02:14:19

我很迷惑，你說'他們是默認隱藏的'你怎麼徘徊它們？你可以製作小提琴嗎？ – egig 2013-04-22 02:16:17

默認情況下，我的意思是說，在ajax渲染時，我已將span設置爲不顯示任何值。所以，現在當我懸停父元素的結果我希望跨度顯示。哪顯示，但所有的跨度顯示 – RIK 2013-04-22 02:17:34

只需使用CSS。我相信這個問題可能是元素如何放置在頁面上以及jQuery事件如何工作。嘗試使用CSS規則，看看它是如何工作的。

#results .prod_desc { 
    display: none; 
} 

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

來源

2013-04-22 02:10:13

我試圖顯示prod_desc .prod已經顯示。 .prod是prod_desc類的父親 – RIK 2013-04-22 03:05:19

然後將其從.prod更改爲.prod。prod_desc – 2013-04-22 14:54:43

針對您的特定問題編輯回答。 – 2013-04-22 14:56:00

如果這些動態添加，試試這個

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

來源

2013-04-22 14:58:27 tymeJV

顯示懸停時的子元素，並在不懸停時隱藏

回答

相關問題