Question

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

使用Zeroclipboard v2.1.6

（浏览器中的Atleast：Google Chrome版本37.0.2062.124 m）

我的代码如下：

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

Answer 1

您忘了将javascript包含在jQuery（文档）.ready（function（）... block。或者我的代码中的简短版本 - $（function（）...

点击按钮运行代码。

＆＃13;

$(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();
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Zeroclipboard悬停问题

1 个答案: