Zeroclipboard 호버 호

호버상의 전체 <tr>의 색상을 변경하려고합니다.하지만 Zeroclipboard와 함께 작동시키지 못하고 커서가 변경되지 않습니다. 아무에게도이를 알릴 방법이 없습니다. 작업?Zeroclipboard 호버 호

(브라우저에서이어야 : 구글 크롬 버전 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>

출처

2014-09-26 Dennis P

당신은 jQuery를에 자바 스크립트를 둘러싸 잊었 (문서) .ready (함수() 아래에있는 내 코드에서와 같이 ... 블록 또는 짧은 버전 -. $ (함수() ...

코드를 실행 버튼을 클릭

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

,745.

출처

2014-09-27 04:09:11 manishie

감사합니다. 그러나 호버가 전체 에서 여전히 작동하지 않으며 커서가 손 모양 커서로 변경되지 않으며 .. 클립 보드 부분이 작동하지 않습니다. 작동합니까? 그러면 브라우저 문제 일 수 있습니다. –

whoops는 swf 파일을 포함하는 것을 잊었습니다 (파일이 .js 파일과 동일한 디렉토리에 로컬로 호스팅되지 않은 경우 수행해야합니다). 하지만 ... 몇 가지 이상한 이유로 내 맥은 어떤 jsfiddle에서 zeroclipboard를 실행할 수 없습니다. 무슨 일인지 모르겠다. 지금 너에게 효과가 있니? – manishie

아니, 여전히 작동하지 않습니다. –

Zeroclipboard 호버 호

답변

관련 문제