悬停不适用于IE11和Edge

css hover internet-explorer-11 microsoft-edge

2037 观看

2回复

28 作者的声誉

我正在尝试通过使用媒体查询将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>

作者: Leo S 的来源 发布者: 2017 年 9 月 15 日

回应 2


1

696 作者的声誉

我发现您可以使用jquery添加一个类hover,该类包含扩展所需的CSS iframe

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

有了这个功能,我们简单地告诉将一个类添加hover到我们的#sidebannerid中

您还需要将CSS添加到hover类中。这将与中使用的CSS相同iframe[id^=sidebanner]:hover。还将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/

作者: Ovidiu Unguru 发布者: 2017 年 9 月 15 日

0

2274 作者的声誉

我在悬停和鼠标离开事件上分别添加和删除了“ 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>

作者: Deepu Reghunath 发布者: 2017 年 9 月 15 日
32x32