Zeroclipboard悬停问题
Zeroclipboard悬停问题
提问于 2014-09-27 03:56:17
我试着在悬停时改变整个<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>回答 1
Stack Overflow用户
发布于 2014-09-27 12:09:11
您忘了在函数(.ready())中包含javascript ...区块。或者我的代码中的简短版本- $(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26067356
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号