Question

我之前从手机上问过这个问题，但它变得非常复杂和混乱，所以我决定在找到一台可用的电脑后重新开始。请注意，由于项目的分类性质也位于离线状态，因此我无法提供完整的原始代码或图像。下面的简单版本无论如何都包含相同的问题，因此我非常肯定能够解决此示例代码中的问题将足以让我对实际应用程序中的任何其他内容进行故障排除。

我有以下代码：https://jsfiddle.net/mssdjrzk/

<!DOCTYPE html>
<html>
  <style>
    button {
      width: 24px;
      height: 24px;
      padding: 4px 0 0;
    }
    img {
      width: 16px;
      height: 16px;
    }
  </style>
  <body>
    <button type="button">
      <img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
    </button>
    <hr>
    <a>Sample link</a>
  </body>
</html>

当光标悬停在按钮上时，会触发默认的基于浏览器的行为。对于IE 11，按钮会突出显示。

接下来，我为a:hover添加了额外的CSS：https://jsfiddle.net/yLrznyss/

<!DOCTYPE html>
<html>
  <style>
    button {
      width: 24px;
      height: 24px;
      padding: 4px 0 0;
    }
    img {
      width: 16px;
      height: 16px;
    }
    a:hover {
      color: red;
    }
  </style>
  <body>
    <button type="button">
      <img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
    </button>
    <hr>
    <a>Sample link</a>
  </body>
</html>

现在，当我将光标悬停在按钮上时，行为混乱了 - 虽然onclick之类的其他事件正常呈现，但行为不会呈现。我做了很多故障排除并尝试解决方法但没有成功，但这是我的发现：

违规元素为:hover。将哪个元素/类/ id附加到它并不重要，它在样式表中的存在就足够了。即使a:hover {}不包含样式也会导致问题，而span:hover {}在HTML中甚至不存在<span>元素时也是如此。
我在Chrome上试过，但问题不存在，因为Chrome的按钮默认悬停行为的呈现方式不同。 因此，这是特定于浏览器的问题。
问题仅存在于包含图像的按钮，而不是包含文本，空按钮或不在任何内容中的独立图像的按钮。

我的猜测是样式表中存在:hover CSS，即使它是空的，也会导致IE渲染网页及其行为的问题。

如何防止按钮和/或其内部图像受到影响，从而返回默认的IE按钮悬停行为？我可以更改任何内容，只要在所需的悬停样式上在不影响按钮的情况下实现超链接。

使用此代码的完整应用程序将在Windows 10上使用IE11 - 而不是任何其他浏览器。 使用HTML，CSS或JavaScript的解决方案是可以接受的，但我的项目没有可用的外部库。

Answer 1

也许我错过了什么，但我没有在按钮内看到任何锚链接。我用了这段代码：

  button:hover {
      background: red;
    }

并且能够获得您正在寻找的悬停效果

Answer 2

我找到了一个成功的解决方法。由于我无法使用:hover选择器，因此我必须通过JavaScript模仿它。致Javascript onHover event的解决方案。

<!DOCTYPE html>

<html>
  <style>
    button {
      width: 24px;
      height: 24px;
      padding: 4px 0 0;
    }

    img {
      width: 16px;
      height: 16px;
    }

    .isHovered {
      color: red;
    }
  </style>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var links = document.getElementsByTagName("A");

      for (var i = 0; i < links.length; ++i) {
        (function() {
          var link = links[i];
          var hoverTimer;

          link.addEventListener("mouseover", function() {
            hoverTimer = setTimeout(function() {
              link.className = "isHovered";
            }, 0);
          });

          link.addEventListener("mouseout", function() {
            clearTimeout(hoverTimer);
            link.className = "";
          });
        }());
      }
    });
  </script>

  <body>
    <button type="button">
      <img src="https://cdn1.iconfinder.com/data/icons/famfamfam_mini_icons/action_refresh_blue.gif">
    </button>

    <hr>

    <a>Sample link</a>
  </body>
</html>

我欢迎任何更好的答案，或者至少解释为什么我有这个问题 - 如果你能够在你的机器上复制它。

a：悬停CSS样式，影响包含图像

2 个答案: