Question

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

JS

new ClipboardJS('.btn');

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
             e.clearSelection();
});

HTML 的

表1

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

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

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



    <!-- TABLE 1 -->    
    <table>

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

表2

   <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>

CSS

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

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

悬停有效，但除非我离开页面而不是离桌而且只有一个悬停显示，否则它不会消失。我希望每张桌子都有一个按钮。有人可以帮忙吗？另外，如果您非常友好地提供帮助，请在此处发布代码而不是JSFiddle？我现在在我的工作电脑上，它已被阻止。谢谢！

Answer 1

我在这里找到了几个问题：

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

将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>

clipboard.js悬停在表格中

1 个答案: