且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在悬停时,在引导行的右侧显示删除按钮

更新时间:2023-11-01 14:09:16

尝试以下代码:

HTML:

<div class="row">
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="hover-btn">
     <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
     </button>
  </div>
</div>

CSS:

.row {
    position: relative;
  }

  .hover-btn {
     position: absolute;
     right: 15px;
     display: none;
  }

  .row:hover .hover-btn {
     display: block;
  }

工作示例