悬停在 IE11 和 Edge 上不起作用答案

【问题标题】：Hover is not working on IE11 and Edge悬停在 IE11 和 Edge 上不起作用
【发布时间】：2017-09-27 00:10:41
【问题描述】：

当鼠标指针位于 iframe 上时，我正在尝试使用媒体查询使 iframe 扩大和缩小。

但是，它不起作用，但是，当鼠标点在框架边框上时，它会扩大和缩小。

有人知道如何在 IE11 和 Edge 上解决此问题吗？

此外，由于同源策略，我不能在 iframe 之外使用 jQuery。所以，我可能需要修复 css 来实现这个动画。

<html>
  <head>
  <style type="text/css">
  iframe[id^=sidebanner]{
    width: 80px;
  }
  iframe#sidebanner{
    right: 0;
  }
  iframe[id^=sidebanner]:hover{
    width: auto;
    -webkit-transition: width ease-in-out 0.1s;
    -moz-transition: width ease-in-out 0.1s;
    -ms-transition: width ease-in-out 0.1s;
    -o-transition: width ease-in-out 0.1s;
    transition: width ease-in-out 0.1s;

  }
  @media all and (max-width: 2500px) {
    iframe[id^=sidebanner]:hover{
      width: 50%;
    }

  }
  @media all and (max-width: 900px) {
    iframe[id^=sidebanner]:hover{
      width: 55%;
    }
  }
  @media all and (max-width: 800px) {
    iframe[id^=sidebanner]:hover{
      width: 60%;
    }
  }
  @media all and (max-width: 750px) {
    iframe[id^=sidebanner]:hover{
      width: 65%;
    }
  }
  @media all and (max-width: 700px) {
    iframe[id^=sidebanner]:hover{
      width: 70%;
    }
  }
  @media all and (max-width: 650px) {
    iframe[id^=sidebanner]:hover{
      width: 75%;
    }
  }
  @media all and (max-width: 600px) {
    iframe[id^=sidebanner]:hover{
      width: 80%;
    }
  }
  </style>

  </head>
  <body>

  <iframe id="sidebanner" src="" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="true" style="top: 0px; height: 100%; right: 0px;"></iframe>

  </body>
  </html>

【问题讨论】：

您是否通过按 F12 进入开发者控制台检查了您的 javascript 错误？

标签： css hover internet-explorer-11 microsoft-edge

【解决方案1】：

我发现您可以使用 jquery 添加一个类 hover，其中将包含扩展 iframe 所需的 css。

$('#sidebanner').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

通过这个函数，我们简单地告诉我们添加一个类hover到我们的#sidebanner id

您还需要将 css 添加到 hover 类。这将与 iframe[id^=sidebanner]:hover 中使用的 CSS 相同。还将hover 类添加到您的@media 查询中。

.hover {
    -webkit-transition: width ease-in-out 0.1s;
    -moz-transition: width ease-in-out 0.1s;
    -ms-transition: width ease-in-out 0.1s;
    -o-transition: width ease-in-out 0.1s;
    transition: width ease-in-out 0.1s;
  }

示例：https://jsfiddle.net/c9syw731/2/

【讨论】：

非常感谢您的帮助。但是，我不能在 iframe 之外使用 jQuery。所以，我可能需要修复 css 来实现这个动画。
根据我的研究，在没有 jquery 的情况下，我找不到 :hover 在 IE / Edge 上处理 iframe 的方法
感谢您的帮助。我真的很感谢你的帮助。我也找不到任何解决方案。
只是想知道...您认为这是 IE11 上的错误吗？ @djgroup

【解决方案2】：

我在悬停和鼠标离开事件上相应地添加和删除了“hoveranimation”类。

并在 css 中添加了“#sidebanner.hoveranimation”

$('#sidebanner').hover(function() {
      $(this).addClass('hoveranimation');
    });

    $('#sidebanner').mouseleave(function() {
      $(this).removeClass('hoveranimation');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  <style type="text/css">
  iframe[id^=sidebanner]{
    width: 80px;
     !important;
  }
  iframe#sidebanner{
    right: 0;
  }
  iframe[id^=sidebanner]:hover{
   

  }
  @media all and (max-width: 2500px) {
    iframe[id^=sidebanner]:hover{
      width: 50%;
    }

  }
  @media all and (max-width: 900px) {
    iframe[id^=sidebanner]:hover{
      width: 55%;
    }
  }
  @media all and (max-width: 800px) {
    iframe[id^=sidebanner]:hover{
      width: 60%;
    }
  }
  @media all and (max-width: 750px) {
    iframe[id^=sidebanner]:hover{
      width: 65%;
    }
  }
  @media all and (max-width: 700px) {
    iframe[id^=sidebanner]:hover{
      width: 70%;
    }
  }
  @media all and (max-width: 650px) {
    iframe[id^=sidebanner]:hover{
      width: 75%;
    }
  }
  @media all and (max-width: 600px) {
    iframe[id^=sidebanner]:hover{
      width: 80%;
    }
  }
  #sidebanner.hoveranimation {
    width: auto;
    -webkit-transition: width ease-in-out 0.1s;
    -moz-transition: width ease-in-out 0.1s;
    -ms-transition: width ease-in-out 0.1s;
    -o-transition: width ease-in-out 0.1s;
    transition: width ease-in-out 0.1s;
}
  
  </style>

  </head>
  <body>

  <iframe id="sidebanner" src="" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="true" style="top: 0px; height: 100%; right: 0px;"></iframe>

  </body>
  </html>

【讨论】：

感谢您的帮助，很遗憾，出于安全原因，我们只能使用 CSS 悬停 iframe。所以....你认为你可以不用 jQuery 吗？