鼠标悬停在特定文本上时如何显示编辑操作图标答案

【问题标题】：How to show edit action icon when mouse-over on particular text鼠标悬停在特定文本上时如何显示编辑操作图标
【发布时间】：2015-07-01 13:28:02
【问题描述】：

如何在鼠标悬停和鼠标移出特定文本时显示/隐藏编辑图标。

这是我的html代码sn-p

<ul>
    <li>
        <a id="pop" href="javascript:;;" data-content="test Desc" data-id="123">
            <span class="testNameInfo">Test</span>
        </a>
        <div class="pull-right icons-align">
            <a href="javascript:;;" class="editInline"><i class="fa fa-pencil"></i>..</a>
            <a href="javascript:;;"><i class="fa fa-plus"></i></a>
            <a href="javascript:;;"><i class="fa fa-times"></i></a>
        </div>
    </li>
</ul>

当页面加载时，fa-pencil 图标处于隐藏状态。当我将鼠标悬停在文本上时，它应该显示 fa-pencil 图标。其余图标（添加和删除）始终处于显示状态。

这是我隐藏 fa-pencil 图标的 javascript

$("a.editInline").css("display","none");

我正在使用主干和 marionette js 框架，所以我需要在视图中注册事件。

请告诉我什么是摆脱我的问题的最佳方式。

【问题讨论】：

标签： javascript jquery backbone.js marionette

【解决方案1】：

你可以这样做：

$('.testNameInfo').on('mouseover mouseout',function(){
     $(this).closest('li').find('.editInline').toggle();
     //find the closest li and find its children with class editInLine and 
     //toggle its display using 'toggle()'
});

更新

DEMO

@JamieBarker 提出了他的观点，这在这里是有效的，所以我建议改用下面的代码

$("a.editInline").css("display","none");
$('li').on('mouseover mouseout',function(){
     $(this).find('.editInline').toggle();
     //find its children with class .editInLine and 
     //toggle its display using 'toggle()'
});

【讨论】：

或者只是将监听器添加到li
@JamieBarker 如果将侦听器添加到li，则在悬停li 的任何子项时，将显示编辑图标，这不是OP 想要的。所以定位正确的元素并切换它的状态.. :)
这很愚蠢。想象一下它的工作原理！您将鼠标悬停在文本上，您会看到一个图标出现，非常好。你过去点击图标，但是哎呀，它消失了！因为您不再将鼠标悬停在文本上...
@JamieBarker 值得注意的一点！！在这种情况下，OP 必须将结构更改为完全不同的结构，例如将图标放入 .pop 并将侦听器添加到 .pop.. 听起来很疯狂！！
任何时候.. 快乐编码.. :)

【解决方案2】：

如果可以的话，使用 CSS 比使用 JavaScript 更好：

a.editInline {
    display:none;
}
li:hover a.editInline {
    display:inline-block;
}

【讨论】：

【解决方案3】：

更新

在性能/简单性方面，我建议使用提供的 CSS 解决方案。如果所有其他你可以使用，那么 JS 解决方案。

可选的 CSS 解决方案

.editInline {
  display: none;
}

#pop:hover .icons-align .editInline {
 display: inline-block;
}

JS 解决方案

$(function() {
  $(".editInline").hide(); // Use this if CSS is not wanted

  $("#pop").hover(function() {
    $(".editInline").show();
  }, function() {
    $(".editInline").hide();
  });
});

【讨论】：