Question

我正在使用ZeroClipboard库，因为它支持safari而其他包，例如clipboard.js不支持。 ZeroClipboard的工作方式是在按钮上放置一个不可见的flash组件。虽然这允许按钮保持CSS的初始样式设置，但它不允许它使用它的样式属性，例如cursor和:active。您可以在<{3}}

下面看到或<{3}}

代码段似乎与ZeroClipboard无关。有关工作示例，请参阅JSFiddle

＆＃13;

ZeroClipboard.config({swfPath: "https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf"});
var client = new ZeroClipboard($("#copyH"));

＆＃13;

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;
}

＆＃13;

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

＆＃13;

有没有办法可以保持包和CSS样式的功能？

Answer 1

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

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

不确定如何生成ID，因此在确定如何编写CSS时可能需要小心。

Answer 2

ZeroClipboard有一个类.zeroclipboard-is-active，可以让这个例子正常工作。

例如，代码可以重写为

&:active, &.zeroclipboard-is-active {
  @include box-shadow(-1px -1px 4px #7f7aff);
  @include transform(translate(1px, -4px));
  @include transition(all 0.25s !important);
}

可以找到here

的文档

将Flash图层放置在元素上时保持CSS动画

2 个答案: