Html 鼠标悬停在图像上时出现的按钮

我希望当我在图像上移动光标时，它会显示3个按钮，然后当我点击其中任何一个按钮时，会打开一个模式。我实际上已经完成了，但问题是当我点击出现的任何按钮时，一个模式会被反映出来，一旦我试图关闭该模式，这三个选项就会显示在该图像上，而不是显示出来。请任何人帮忙

代码如下：

<div class="row text-center">
  <div class="col-sm-4">
    <div class="thumbnail">
      <div class="caption">
        <button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
        <button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
        <button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
      </div>
      <img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
    </div>
    <h3 class="text" id="D1"><b>Department Options </b></h3> 
  </div>
</div>

<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="psw">Department Name</label>
            <input type="text" class="form-control" id="psw" placeholder="Provide a name">
          </div>
          <div class="form-group">
            <label for="usrname">Department ID</label>
            <input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
          </div>
          <button type="submit" class="btn btn-block">Submit
            <span class="glyphicon glyphicon-ok"></span>
          </button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove"></span> Cancel
        </button>
        <p>Need <a href="#">help?</a></p>
      </div>
    </div>
  </div>
</div>

添加
删除
修改
部门选项
&时代；
创建部门
部门名称
部门ID
提交
取消
需要

如果你只是想在模态关闭时隐藏这些按钮，那么如果你使用jQuery，那就太麻烦了。您只需按以下方式使用引导模态的隐藏.bs.modal事件：

$('#myModal1a').on('hidden.bs.modal', function () {

    $('.imgButton').each(function () {

        $(this).hide();

    })

})

---

假设您为所有按钮提供了一个名为“imgButton”的类：）

如果您只是想在模态关闭时隐藏这些按钮，那么如果您使用jQuery，这将是一个难题。您只需按以下方式使用引导模态的隐藏.bs.modal事件：

$('#myModal1a').on('hidden.bs.modal', function () {

    $('.imgButton').each(function () {

        $(this).hide();

    })

})

---

假设您为所有按钮提供了一个名为“imgButton”的类：）

也添加css或将更好查看您的自定义css将非常有用：）也添加css或将更好查看您的自定义css将非常有用：）谢谢您的回复。但是，现在当我将这个脚本添加到我的代码中时，当我关闭模式时，按钮消失了。但是，当我再次将鼠标悬停在图像上时，它们不会再次显示以选择其中任何一个。如何做？？在图像$（'#myImg'）.hover（function（）{$（'.imgButton'）的悬停处添加一个函数。每个（function（）{$（this.show（）；}）假设myImg是图像的ID，在这个UI中出现一个问题，当我通过单击模式底部的关闭按钮关闭模式，然后重新打开时，有时会出现关闭按钮dis。正因为如此，我需要刷新我的html页面，以再次看到页脚中的关闭按钮。请建议如何使该按钮在模态中每次都可见。模态页脚按钮是否也具有imgButton类？如果是，请将其删除。否，页脚按钮中没有此类类。正如我在代码中提到的，只有我在使用。没有这样的类imgButton。怎么办？谢谢你的回复。但是，现在当我将这个脚本添加到我的代码中时，当我关闭模式时，按钮消失了。但是，当我再次将鼠标悬停在图像上时，它们不会再次显示以选择其中任何一个。如何做？？在图像$（'#myImg'）.hover（function（）{$（'.imgButton'）的悬停处添加一个函数。每个（function（）{$（this.show（）；}）假设myImg是图像的ID，在这个UI中出现一个问题，当我通过单击模式底部的关闭按钮关闭模式，然后重新打开时，有时会出现关闭按钮dis。正因为如此，我需要刷新我的html页面，以再次看到页脚中的关闭按钮。请建议如何使该按钮在模态中每次都可见。模态页脚按钮是否也具有imgButton类？如果是，请将其删除。否，页脚按钮中没有此类类。正如我在代码中提到的，只有我在使用。没有这样的类imgButton。怎么办？？