logo标签列表

悬停和嵌套列表：哪个元素被悬停？

javascriptjqueryhtmlhover
3
我有一个嵌套列表，其中包含类别和子类别，深度未知，它是使用来自数据库的数据创建的。
我想做的是在悬停在类别旁边显示一个小图片，即叉号。
问题是我不能可靠地区分正在悬停的是祖先li元素还是子元素，因为当我从子类别返回到父类别时，“mousein”事件不会再次触发。
我的当前代码是： Html示例 
<ol class="innerCenter" id="bdc_categories">
    <form action="?function=base_connaissances&amp;onglet=2" method="POST" id="" name="">
        <li>Hardware<img class="hidden" src="image/supp.png">
            <ol>
                <li>Ecran<img class="hidden" src="image/supp.png">
                    <ol>
                        <li>Alimentation<img class="hidden" src="image/supp.png"></li>
                        <li>Dalle<img class="hidden" src="image/supp.png"></li>
                    </ol>
                </li>
                <li>Disque dur<img class="hidden" src="image/supp.png"></li>
            </ol>
        </li>
        <li>Test<img class="hidden" src="image/supp.png"></li>
        <li>Test<img class="hidden" src="image/supp.png"></li>
        <li>Test<img class="hidden" src="image/supp.png"></li>
        <li>Ajouter une catégorie...<img class="hidden" src="image/supp.png"></li>
        <li>Software<img class="hidden" src="image/supp.png">
            <ol>
                <li>Excel<img class="hidden" src="image/supp.png"></li>
            </ol>
        </li>
    </form>
    <form action="?function=base_connaissances&amp;onglet=2" method="POST" id="" name="">
        <input type="hidden" value="NULL" name="idCategSup">
        <input type="text" value="Ajouter une catégorie..." name="lib_categ">
        <input type="submit" value="Ok">
    </form>            
</ol>

Javascript

$("#bdc_categories").on('mouseleave', '', '', function(){$("#bdc_categories li").removeClass('is-hover'); $("#bdc_categories li").children('img').css({"visibility": "hidden"});});
    $("#bdc_categories li").hover(function (event) {
        event.stopPropagation();

        if($(event.target).is('li')){
        $("#bdc_categories li").removeClass('is-hover');
        $("#bdc_categories li").children('img').css({"visibility": "hidden"});

        $(event.target).addClass('is-hover');
        $(event.target).children('img').css({"visibility": "visible"});



        var tar = $(event.target);
        while ($(tar.parent('ol').parent('li')).length) {
            tar = $(tar.parent('ol').parent('li'));
            $(tar).addClass('is-hover');
            //$(tar).children('img').css({"visibility": "hidden"});
        }
    }

    }, function (event) {
        event.stopPropagation();

        $(event.target).removeClass('is-hover');




        $("#bdc_categories li").not(".is-hover").children('img').css({"visibility": "hidden"});
        $("#bdc_categories .is-hover").children('img').css({"visibility": "visible"});
        $("#bdc_categories .is-hover").parent('ol').parent('li').children('img').css({"visibility": "hidden"});

    }

它几乎可以工作，但我相信有更好的方法来实现这个？还有一个小问题：如果我从“测试”li到硬件li，图像不会出现...我认为这是因为鼠标事件在ol元素上触发，即使我不在li上...

任何帮助将不胜感激！

1个回答
0
你的JS代码最后不是缺少一个 ); 吗？当我修复它并在JSFiddle上尝试时，它可以运行。 this 不是你正在寻找的吗？
只是我复制代码时犯了一个错误，但是尝试从测试列表转到硬件列表（不悬停在子类别上），图像不会显示。 - Nehluxhes
@Nehluxhes 谢谢你让我知道。不过，这对我来说还是有效的。我可以从测试的 li 到硬件上的一个，并且图片显示出来 :) - user4454229
抱歉，我应该补充一下，您不能离开主要的 <ol>，只需在测试 <li> 到硬件 <li> 之间垂直移动（保持在填充区内）。 - Nehluxhes
也不要超过这些数字！是的，这是一个非常特定的错误:D 从测试到硬件，垂直方向上。在IE11，Chrome和Firefox中进行了测试，我都遇到了这个错误。 - Nehluxhes
哦，没错！从技术角度来看，我看不出为什么它不会起作用。当你往上移动通过<ol>时，它应该仍然触发一个新事件。抱歉@Nehluxhes，我会删除我的回答 :) - user4454229
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接