Question

我有一个UL，每个LI在悬停时需要显示“删除”链接/按钮。

这是一个codepen：http://codepen.io/MARS/pen/dPKZQv

以下是HTML代码：

<div class="editor-row">
                        <ul class="skyPad-attachments">
                            <li>
                                <a class="link-ico-attachment ico-image-attach rowHook" href="#">
                                    a-jacobs-weeklyProgress.pdf
                                    <span class="link-remove ico-remove removeHook">Remove</span>
                                </a>
                            </li>
                            <li>
                                <a class="link-ico-attachment ico-doc-attach rowHook" href="#">
                                    a-jacobs-weeklyProgress.pdf
                                    <span class="link-remove ico-remove removeHook">Remove</span>
                                </a>
                            </li>
                        </ul>
                    </div>

这是JS：

var row = $('.rowHook'),
    remove = $('.removeHook'),
    reveal = $('.revealHook');


    remove.hide();

row.on('mouseover' , function(){
      if(row.children('span').hasClass('removeHook')) {
        $(this).fadeIn();
      }
    });

即使这个当前功能需要稍作修改，我似乎无法理解如何触发“Mouseleave”事件到.hide（）“删除”。

以下是1分钟的广告投放：https://www.youtube.com/watch?v=eCq9YVEi3BM

感谢任何花时间帮助我理解的人。

Answer 1

你只需做一个小改动。

变化：

$(this).fadeIn();

为：

$(this).find('span').fadeIn();

$(this)中的{p> $(this).fadeIn();引用该链接，但您希望淡出子范围。

<强> jsFiddle example

将鼠标悬停在列表项上以使用jQuery显示隐藏的元素

1 个答案: