Javascript clipboard.js悬停表格

我使用clipboard.js显示一个按钮，允许用户复制鼠标悬停在上面的特定表格。我要一张桌子用，但我需要两张桌子用。以下是我到目前为止的情况：

JS

HTML

表1

---

悬停可以工作，但它不会消失，除非我离开页面而不是离开桌子，并且只显示一个悬停。我想要每张桌子的按钮。有人能帮忙吗？另外，如果您愿意提供帮助，请将代码发布在这里，而不是JSFIDLE？我现在在我的工作电脑上，它被封锁了。谢谢

我在这里发现了几个问题：

第一：你的按钮似乎在同一个地方，这就是为什么你只看到其中一个。这也使得悬停手柄很奇怪

将CSS更改为：

.overlay {
  position: relative;
}

第二，通过对容器使用相同的类，可以将所有事件分解为一个jQuery调用

<div class="container">
  <h3>Table 1</h3>
  <div id="table1" class="table">

    <div class="overlay">
      <button style="display:none;">Button A</button>
    </div>

    <table>
      <tr>
        <td>Table 1</td>
      </tr>
    </table>
  </div>
</div>

<div class="container">
  <h3>Table 2</h3>
  <div id="table2" class="table">

    <div class="overlay">
      <button style="display:none">Button B</button>
    </div>

    <table>
      <tr>
        <td>Table 2</td>
      </tr>
    </table>
  </div>
</div>

<script>
  $(document).ready(function() {
    $(document).on('mouseenter', '.table', function() {
      $(this).find("button").show();
    }).on('mouseleave', '.table', function() {
      $(this).find(":button").hide();
    });
  });
</script>

表1
按钮A
表1
表2
按钮B
表2
$（文档）.ready（函数（）{
$（document）.on（'mouseenter'，'.table'，function（）{
$（this.find（“button”）.show（）；
}).on（'mouseleave'，'.table'，function（）{
$（this.find（“：button”）.hide（）；
});
});

非常感谢您！它起作用了。困扰我的一件事是，当我悬停时，桌子向下移动以按下按钮

overlay{position:absolute；}

在不移动表格的情况下为我提供了想要的效果，但仍然只在一个位置显示按钮。除了

叠加{position:relative；}

之外，还有其他方法不能移动表格，或者我应该尝试使用它吗？您可以将

位置：relative

设置为

。table

，然后将

叠加

切换回

位置：绝对

。绝对元素定位到最近的父元素，该父元素具有

位置

属性集。再次感谢，我非常感谢！

   <div class="container">                       
   <h3>Table 2</h3>
   <div id="table2" class="table2">


   <div class="overlay">
   <button type ="btn" class="btn btn-default pull-right tooltip" title="Copied!" style="display:none;" data-clipboard-target="#table2">
    <img src="clippy.png" width="20px" title="Copy to clipboard">
   </button>
   </div> 

   <script>
   $(document).ready(function () {
                    $(document).on('mouseenter', '.table2', function () {
                        $(this).find(":button").show();
                    }).on('mouseleave', '.table2', function () {
                        $(this).find(":button").hide();
                    });
                });
   </script>



    <!-- TABLE 2 -->    
    <table>

    </table>
    <!-- END TABLE 2 -->
    </div>
 </div>

.overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 text-align: center;
}

.overlay:before{
  content: ' ';
  display: block;
  height: 15%;
 }

.overlay {
  position: relative;
}

<div class="container">
  <h3>Table 1</h3>
  <div id="table1" class="table">

    <div class="overlay">
      <button style="display:none;">Button A</button>
    </div>

    <table>
      <tr>
        <td>Table 1</td>
      </tr>
    </table>
  </div>
</div>

<div class="container">
  <h3>Table 2</h3>
  <div id="table2" class="table">

    <div class="overlay">
      <button style="display:none">Button B</button>
    </div>

    <table>
      <tr>
        <td>Table 2</td>
      </tr>
    </table>
  </div>
</div>

<script>
  $(document).ready(function() {
    $(document).on('mouseenter', '.table', function() {
      $(this).find("button").show();
    }).on('mouseleave', '.table', function() {
      $(this).find(":button").hide();
    });
  });
</script>