Question

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

Answer 1

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

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

使用此功能，我们只需告诉我们hover ID

添加课程#sidebanner

您还需要将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/

Answer 2

我添加并删除了＆＃34; hoveranimation＆＃34;关于悬停和鼠标离开事件的课程。

并添加了＃34;＃sidebanner.hoveranimation＆＃34;到css

＆＃13;

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

＆＃13;

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

＆＃13;

Hover不适用于IE11和Edge

2 个答案: