发表新帖
发表新帖

CSS/JQuery Hover Affect Only Hovered Element and Not Parent

后端 未结
关注
5 1443
说谎
说谎 2021-01-26 11:07

I have a list of nested items, each which has it\'s own edit link.

5条回答
  • 生来不讨喜
    生来不讨喜 (楼主)
    2021-01-26 11:30

    Since the

  • 's are nested inside eachother, the parents are still being "hovered" when you hover over a child. To prevent all the parent links showing, you can loop through all the parent
  • 's and hide the links for the parents. Also, use .children() to only select a direct child, not nested children.

    $(document).ready(function(){
    $('li').hover(
        function(){
            $(this).parents('li').each(function(){$(this).children('.editLink').hide();});
            $(this).children('.editLink').show();
        },
        function(){
            $(this).find('.editLink').hide();   
        }
    );
});

    Here is a working jsfiddle.

0 讨论(0)
 看不清?
提交回复
热议问题