如何在鼠標懸停上顯示/隱藏元素？

Question

如何在鼠標懸停目標對象時顯示和隱藏對象p？

jQuery代碼：

$('.jcarousel-item-horizontal').hover(function(event){ 
        event.preventDefault(); 
        event.stopPropagation(); 
        $("p[class*='hover_carosuel']").fadeIn(300) 
        },function(){ 
        $("p[class*='hover_carosuel']").fadeOut(400) 
       }) 

示例代碼HTML：

<li class="odd jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none;"> 
    <div class="views-field views-field-field-zdjecie"> 
     <div class="field-content"> 
      <a href="http://www.localhost/linia-pro"><img typeof="foaf:Image" src="http://www.localhost/sites/default/files/pro.png" width="90" height="90" alt=""></a> 
     </div> 
    </div> 
    <div> 
     <p class="hover_carosuel"> 
      <a href="/linies">Pro</a> 
     </p> 
    </div> 
</li> 

<li class="odd jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none;"> 
    <div class="views-field views-field-field-zdjecie"> 
     <div class="field-content"> 
      <a href="http://www.localhost/linia-pro"><img typeof="foaf:Image" src="http://www.localhost/sites/default/files/pro.png" width="90" height="90" alt=""></a> 
     </div> 
    </div> 
    <div> 
     <p class="hover_carosuel"> 
      <a href="/linies">Pro</a> 
     </p> 
    </div> 
</li> 

<li class="odd jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none;"> 
    <div class="views-field views-field-field-zdjecie"> 
     <div class="field-content"> 
      <a href="http://www.localhost/linia-pro"><img typeof="foaf:Image" src="http://www.localhost/sites/default/files/pro.png" width="90" height="90" alt=""></a> 
     </div> 
    </div> 
    <div> 
     <p class="hover_carosuel"> 
      <a href="/linies">Pro</a> 
     </p> 
    </div> 
</li> 

Answer 1

試試這個，

$(function(){ 
    $('.jcarousel-item-horizontal').hover(function(event){ 
     event.stopPropagation(); 
     $(this).find("p.hover_carosuel").fadeIn(300); // fade-in only the child p element 
    },function(){ 
     $(this).find("p.hover_carosuel").fadeOut(400);// fade-out only the child p element 
    }); 
});