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

如何在鼠标上方显示/隐藏编辑图标，在特定文本上显示/隐藏鼠标

这是我的html代码片段

<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>

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

请让我知道从我的问题中解脱出来的最佳方式。

您可以按以下方式进行：

$('.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()'
});

---

---

更新

@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()'
});

---

更新

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

可选CSS解决方案

.editInline {
  display: none;
}

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

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

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

JS解决方案

.editInline {
  display: none;
}

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

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

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

---

如果可以，最好使用CSS而不是JavaScript：

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

---

或者，只需将监听器添加到

li

@JamieBarker，如果将监听器添加到

li

，则悬停在

li

的任何子级上，将显示编辑图标，这不是OP想要的。因此，以适当的元素为目标并切换其状态：）不过这很愚蠢。想象一下它能工作！您将鼠标悬停在文本上，您会看到一个图标出现，非常好。你走过去点击图标，但是哎呀，它消失了！因为你不再在文本上徘徊了…@JamieBarker值得注意！！在这种情况下，OP必须将结构更改为完全不同的结构，如将图标放在

.pop

中，并将侦听器添加到

.pop

。。听起来很疯狂！！随时快乐编码…）