javascript - 当 Flash 层放置在元素上时保持 CSS 动画

Question

我正在使用 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 样式？

Answer 1

您可以将样式放在 Flash 对象本身而不是按钮上。或者甚至在两者上都使用多个选择器:

#global-zeroclipboard-flash-bridge, #copyH { cursor:pointer; }

不确定 id 是如何生成的，因此在弄清楚如何编写 css 时您可能需要注意这一点。