Question

我有这个标记

document.addEventListener('copy', function(e) {
  const text_only = document.getSelection().toString();
  const clipdata = e.clipboardData || window.clipboardData;  
  clipdata.setData('text/plain', text_only);
  clipdata.setData('text/html', text_only);
  e.preventDefault();
});

和此SASS：

<button class="toggle" aria-label="Toggle">
   <div class="globe-img"></div>
</button>

它可用于除IE之外的所有最新浏览器。悬停伪状态不会在IE中触发。我在Stackoverflow上发现了许多与此有关的问题，但是它们都比较老，还没有提供解决方案（尚未），因此我认为可能值得再次提出。

请注意，两种状态都定义了背景图像。我添加了z-index并尝试了IMG标签而不是DIV。我尝试了display：block并添加了背景色。我感谢任何新的指示。如果没有其他问题，我将只使用Javascript在悬停时添加常规CSS类。

Answer 1

因为我没有要测试的IE，所以我可能会错...

我猜这是包装的问题所在。我假设按钮的悬停状态会破坏div的悬停状态。如果您删除<button>，是否可以使用？

或者，如果将鼠标悬停在按钮上，它还能工作吗？

 .globe-img {
   background-image: url('../images/globe.png');
   height: 50px;
   width: 50px;
 }
 button:hover .globe-img {
   background-image: url('../images/globe-hv.png');
 }

：hover伪状态未在IE中触发

1 个答案: