2014-09-26 260 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