Question

如何在鼠标悬停目标对象时显示和隐藏对象？

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)
                })

示例代码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
    });
});

如何在鼠标悬停时显示/隐藏元素？

1 个答案: