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

How to show edit action icon when mouse-over on particular text

本文关键字：显示 编辑 操作 图标 鼠标 悬停 文本      更新时间：2023-09-26

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

这是我的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>

页面加载时，fa铅笔图标处于隐藏状态。当我把鼠标移到文本上时，它应该显示fa铅笔图标。其余图标（添加和删除）始终处于显示状态。

这是我隐藏fa铅笔图标的javascript

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

我使用的是主干和marionette 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而不是JavaScript：

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

更新

性能/简单性方面，我建议使用所提供的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();
  });
});
相关文章：