2014-09-26 99 views
2

我尝试更改悬停时整个<tr>的颜色,但是我无法让它与Zeroclipboard一起工作,光标也不会更改,有没有人有关于如何获取此信息的想法工作?Zeroclipboard悬停问题

(ATLEAST在我的浏览器:谷歌浏览器版本37.0.2062.124米)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> 

回答

2

你忘了附上您的JavaScript jQuery的(文件) 。就绪(函数()...块或短版,如下面我的代码 - $(函数()...

点击按钮来运行代码

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

+0

谢谢,但悬停仍然不能在整个上工作,光标也不会变成手形光标..剪贴板部分停止工作..它对您有用吗?那么它可能是一个浏览器问题。 – 2014-09-27 05:23:54

+0

哎呀忘了包含swf文件(如果该文件不在本地托管在与.js文件相同的目录中,则必须执行此操作)。但...由于一些奇怪的原因,我的Mac无法运行zeroclipboard上的任何jsfiddle,我谷歌。不知道发生了什么。它现在对你有用吗? – manishie 2014-09-27 05:57:12

+0

不,仍然不起作用。 – 2014-09-27 07:16:00