Zeroclipboard 悬停问题答案

【问题标题】：Zeroclipboard hover issueZeroclipboard 悬停问题
【发布时间】：2014-09-26 19:56:16
【问题描述】：

我尝试在悬停时更改整个 <tr> 的颜色，但是我无法让它与 Zeroclipboard 一起使用，光标也没有改变，有没有人知道如何让它工作?

（至少在我的浏览器中：Google Chrome 版本 37.0.2062.124 m）与 Zeroclipboard v2.1.6

我的代码如下：

<html>
<head>
<style type="text/css">
.myTABLE { width: 100%; border-collapse: collapse; border: 1px solid black; background-color: lightgrey; }
.myTABLE td { border: 1px solid black; text-align: center; }
.myTABLE tr:hover { background-color: lightgreen; }
.mycopy.zeroclipboard-is-hover { background-color: lightgreen; cursor: hand; }
.mycopy.zeroclipboard-is-active { background-color: #46962B; }
</style>
</head>

<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>

<br><br><br>
<table class="myTABLE">
<tr><td>test</td><td class="mycopy">Copy 1</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 2</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 3</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 4</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 5</td><td>test</td></tr>
<tr><td>test</td><td class="mycopy">Copy 6</td><td>test</td></tr>
</table>

<script type="text/javascript">
var client = new ZeroClipboard( $('.mycopy') );

client.on( 'ready', function(event) {
// console.log( 'movie is loaded' );

client.on( 'copy', function(event) {
event.clipboardData.setData('text/plain', event.target.innerHTML);
} );

client.on( 'aftercopy', function(event) {
console.log('Copied text to clipboard: ' + event.data['text/plain']);
} );
} );

client.on( 'error', function(event) {
// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
ZeroClipboard.destroy();
} );
</script>
</body>
</html>

【问题讨论】：

标签： jquery html css hover zeroclipboard

【解决方案1】：

您忘记将您的 javascript 包含在 jQuery(document).ready(function() ... 块中。或者我下面代码中的简短版本 - $(function() ...

点击按钮运行代码。

$(function() {
  ZeroClipboard.config({
    swfPath: "http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf"
  });
  var client = new ZeroClipboard($('.mycopy'));

  client.on('ready', function(event) {

    console.log(event.target);
    // console.log( 'movie is loaded' );

    client.on('copy', function(event) {
      event.clipboardData.setData('text/plain', 'test');
    });

    client.on('aftercopy', function(event) {
      console.log('Copied text to clipboard: ' + event.data['text/plain']);
    });
  });

  client.on('error', function(event) {
    // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
    ZeroClipboard.destroy();
  });
});

.myTABLE {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
  background-color: lightgrey;
}
.myTABLE td {
  border: 1px solid black;
  text-align: center;
}
.myTABLE tr:hover {
  background-color: lightgreen;
}
.mycopy.zeroclipboard-is-hover {
  background-color: lightgreen;
  cursor: hand;
}
.mycopy.zeroclipboard-is-active {
  background-color: #46962B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>

<div class="mycopy">yo</div>
<br>
<br>
<br>
<table class="myTABLE">
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 1</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 2</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 3</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 4</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 5</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td class="mycopy">Copy 6</td>
    <td>test</td>
  </tr>
</table>

【讨论】：

谢谢，但是悬停在整个上仍然不起作用，光标也不会变为手形光标..剪贴板部分停止工作..对你有用吗？那么可能是浏览器问题。
哎呀忘了包含 swf 文件（如果该文件不是本地托管在与 .js 文件相同的目录中，您必须这样做）。但是......由于某种奇怪的原因，我的 Mac 无法在我谷歌的任何 jsfiddle 上运行 zeroclipboard。不知道怎么了。现在对你有用吗？