Question

在我的html代码中有列表项。我想在悬停相关列表项时显示和隐藏相关的fav div。但我无法将fav div和它的列表项联系起来。

HTML：

<ul>    
<php? for(....): ?>                            
    <li>
        <div id="sin">
            some stuff 
        </div>
        <div id="son">
            some stuff
        </div>
        <div id="fav">
            something 
        </div>
        <br />
    </li>
<php? endfor; ?>
</ul>

当鼠标悬停在<li>标签“fav”div上时，必须出现属于鼠标的列表项目。

我未加工的jquery代码：

$(document).ready(function()
{          
    $("li").hover(function(){
        $("#fav").show()},
        function () {
        $("#fav").hide()
    });
});

Answer 1

问题是您多次使用相同的ID。您需要使用class="fav"代替id="fav"

//对于#sin和#son也是

$(document).ready(function()
{          
    $("li").hover(function(){
        $("#fav").show()},
        function () {
        $("#fav").hide()
    });
});

应该是

$(document).ready(function()
{          
    $("li").hover(function(){
        $(this).find(".fav").show()},
        function () {
        $(this).find(".fav").hide()
    });
});

Answer 2

这里有

$(document).ready(function()
{
    $('.fav').hide();
    $("li").hover(function(){
        $(".fav",$(this)).show()},
        function () {
        $(".fav",$(this)).hide()
    });
});

您需要使用$(".fav",$(this)).代替$(".fav").的上下文。您也需要将id更改为class

                            <li>
                                <div class="sin">
                                    some stuff
                                </div>

                                <div class="son">
                                    some stuff
                                </div>

                                <div class="fav">
                                    something
                                </div>
                                <br />
                            </li>

Jquery悬停列表项

2 个答案: