鼠标在菜单项上的引导程序下拉菜单应在右侧显示编辑/删除图标

bootstrap dropdown on mouse over the menu item should show edit/delete icon on right side

本文关键字：显示 编辑 删除 图标 菜单项 引导程序 下拉菜单 鼠标      更新时间：2023-09-26

如何在鼠标悬停的引导程序菜单项中包含编辑、删除图标。同时单击编辑/删除图标时，应分别调用编辑/删除方法。

需要在下面的引导程序下拉列表中实现这一点，

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>

鼠标悬停在HTML/CSS/JavaScript菜单项上，该菜单项应在附近显示"编辑/删除"图标。

我已经用CSS做到了这一点，但有很多方法。您可以通过在具有适当类名的<i>标记上添加单击事件来调用编辑或删除函数。

  ul>li>a:hover i{
    display:block !important;
    float:right !important;
  }
  ul>li>a>i{
    display:none !important;
  }
  .glyphicon-edit{
    padding-left:7%;
  }

工作jsfiddle：https://jsfiddle.net/6v4d7kg9/

相关文章：