Hover is not working on IE11 and Edge

I am trying to make iframe expanded and shrank when the mouse pointer is on the iframe by using media query.

However, it is not working, but, when the mouse point is on the frame border then it is expanded and shrank.

Dose anyone know how to fix this on IE11 and Edge?

Also, there is limitation that I can not use jQuery outside the iframe because of same origin policy. So, I might have to fix css to implement this animation.

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

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

2条回答

傲

2楼-- · 2019-07-26 21:21

I found out that you can use jquery to add a class hover that will contain the css needed to extend the iframe.

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

With this function we simply tell to add a class hover to our #sidebanner id

You also need to add css to the hover class. This will be the same css used in iframe[id^=sidebanner]:hover. Also add the hover class to your @media queries.

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

Example: https://jsfiddle.net/c9syw731/2/

0人赞添加讨论(0) 举报

叛逆

3楼-- · 2019-07-26 21:30

I added and remove "hoveranimation" class on hover and mouse leave event correspondingly.

and added a "#sidebanner.hoveranimation" to css

$('#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>

0人赞添加讨论(0) 举报

Hover is not working on IE11 and Edge

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间