How to show/hide a element on mouse hover?

Question

How to show and hide the object p upon mouse hover the target object ???

JQUERY CODE:

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

SAMPLE CODE 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

Try this,

$(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
    });
});