我正在使用 ZeroClipboard库,因为它支持 safari 而其他包,例如 clipboard.js不。 ZeroClipboard
的工作方式是在按钮上放置一个不可见的 flash 组件。虽然这允许按钮保留其由 CSS 设置的初始样式,但不允许它使用 cursor
和 :active
等样式属性。您可以在下方 或此JSFiddle 上看到这个
代码片段似乎不适用于 ZeroClipboard
。参见 JSFiddle工作示例
ZeroClipboard.config({swfPath: "https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf"});
var client = new ZeroClipboard($("#copyH"));
body {
background: grey;
}
h1.copybtn {
background: #4942ff;
display: inline-block;
padding: 2px;
border-style: solid;
border-width: 1px;
border-color: white;
cursor: pointer;
color: white;
-webkit-transition: all 0.25s !important;
-moz-transition: all 0.25s !important;
-o-transition: all 0.25s !important;
transition: all 0.25s !important;
font-size: 1.2em;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
h1.copybtn:active {
-webkit-box-shadow: -1px -1px 4px #7f7aff;
-moz-box-shadow: -1px -1px 4px #7f7aff;
box-shadow: -1px -1px 4px #7f7aff;
-webkit-transform: translate(1px, -4px);
-moz-transform: translate(1px, -4px);
-o-transform: translate(1px, -4px);
transform: translate(1px, -4px);
-webkit-transition: all 0.25s !important;
-moz-transition: all 0.25s !important;
-o-transition: all 0.25s !important;
transition: all 0.25s !important;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js"></script>
<h1 class="copybtn" data-clipboard-text="Won't copy">Has effects working</h1>
<br>
<h1 id="copyH" class="copybtn" data-clipboard-text="Will copy">Has copy working</h1>
有没有办法保留包的功能和 CSS 样式?
最佳答案
您可以将样式放在 Flash 对象本身而不是按钮上。或者甚至在两者上都使用多个选择器:
#global-zeroclipboard-flash-bridge, #copyH { cursor:pointer; }
不确定 id 是如何生成的,因此在弄清楚如何编写 css 时您可能需要注意这一点。
关于javascript - 当 Flash 层放置在元素上时保持 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39189757/