Question

我在一个页面中使用此jquery代码，其中包含用于在用户悬停项目时显示两个链接的产品列表。问题是所有产品都具有相同的类别＆＃34; .prod_box＆＃34;如果我将一个项目悬停在该脚本上，则所有div-s都具有相同的类。脚本是否可以仅定位我悬停的项目，而不是所有具有相同类别的项目？不给每个产品一个不同的类别。

   $('.prod_box').mouseover(function () {
        $('.div_overlay').show();
    }).mouseout(function () {
        $('.div_overlay').hide();
    });

这是HTML：

            <div class="prod_box">
                <a href="#">
                    <div class="prod_img">
                        <img src="images/produse_1.png" />
                        <div class="div_overlay">
                            <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-search white_prod"></span></a>
                            <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-link white_prod"></span></a>
                        </div>                         
                    </div>
                    <div class="title_produs text-left">
                        <h3>Nume produs</h3>
                        <p>Loreum ipsum situm dolores</p>
                    </div>
                </a>
            </div>

           <div class="prod_box">
                <a href="#">
                    <div class="prod_img">
                        <img src="images/produse_4.png" />
                        <div class="div_overlay">
                            <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-search white_prod"></span></a>
                            <a href="http://google.ro" class="insider_box"><span class="glyphicon glyphicon-link white_prod"></span></a>
                        </div>                         
                    </div>
                    <div class="title_produs text-left">
                        <h3>Nume produs</h3>
                        <p>Loreum ipsum situm dolores</p>
                    </div>
                </a>
            </div>
        </div>

Answer 1

假设.div_overlay是.prod_box的后代元素，您可以使用.find()：

$('.prod_box').mouseover(function () {
    $(this).find('.div_overlay').show();
}).mouseout(function () {
    $(this).find('.div_overlay').hide();
});

Answer 2

您正在寻找：

$('.prod_box').mouseover(function () {
        $(this).find('.div_overlay').show();
}).mouseout(function () {
        $(this).find('.div_overlay').hide();
});

jquery悬停同一类目标只有一个

2 个答案: