none
Hover is not working on IE11 and Edge when the mouse pointer is on the iframe RRS feed

  • Question

  • Hello there,

    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.

    Here is my source code.

    <html>
    <head>
    <style type="text/css">
    iframe[id^=sidebanner]{
    	width: 80px;
    	 !important;
    }
    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>



    Also, this source code is working on chrome, FireFox and Opera.

    Only IE and Edge is not working.

    Regards,


    • Edited by SosekiM Thursday, September 14, 2017 7:39 AM
    Thursday, September 14, 2017 6:59 AM

All replies

  • Hi SosekiM,

    First, -ms-transition is not a valid CSS property, you need use transition directly. 

    About why transition doesn't work in IE, please check this link: 

    https://stackoverflow.com/questions/17558426/transition-not-working-in-ie 

    Best Regards,

    Eric Du 

    Tuesday, September 19, 2017 2:03 AM
  • Dear Eric,

    Thank you very much for your help.

    I tired adding <!DOCTYPE html> and <meta http-equiv="X-UA-Compatible" content="IE=edge" />.

    However, it dose not work at all.

    The issue is that when the mouse pointer is on the iframe, it dose not change the width defined in the media query.

    Do you know how this can be fixed?

    Regards,




    • Edited by SosekiM Wednesday, September 20, 2017 10:53 AM
    Tuesday, September 19, 2017 6:19 AM
  • Hi SosekiM,

    Please try add this line code to your page:

     <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>

    For more details, please check the following link:

    Css3 transform animation doesn't work in IE 11 for a dynamically created element:

    https://stackoverflow.com/questions/27480041/css3-transform-animation-doesnt-work-in-ie-11-for-a-dynamically-created-element

    Best Regards,

    Eric

    Thursday, September 21, 2017 9:06 AM
  • Dear Eric,

    Thank you very much for your comment.

    I tried that one too and still did not work at all.

    What I expect is that when the mouse pointer is on the iframe, its width change from 80px to what I defined in the media query.

    It dose change the width when the mouse pointer is on the iframe border, but, when the mouse pointer is inside iframe it goes back to 80px.

    So, it seems to me that IE and Edge do not detect mouse pointer when the mouse point is inside iframe.

    If this is IE specification then I just give up because there is nothing we can do right now.

    I give you an example of what we want to get.




    Best regards,

    • Edited by SosekiM Monday, September 25, 2017 11:11 AM
    Friday, September 22, 2017 1:59 AM
  • Well...

    no one can solve this issue.

    So, I just give up.

    Thank you for your help.

    Regards,


    We can share every information to develop a sql database

    Tuesday, October 24, 2017 5:18 AM
  • I can't believe this still hasn't been resolved, or that no one seems to have an answer. We are having a similar issue with the close video 'x' button when a video is playing in the iframe hero area. It only happens on Microsoft edge and internet explorer. When you are on the bottom of the iframe, the close button appears as it should. When you hover the cursor over the playing video, the close button disappears and the user can't click it it to make the video go away. This is frustrating Microsoft...

    Well javascript/JQuery it is, I guess...

    https://stackoverflow.com/questions/43787495/iframehover-in-ie-and-edge-doesnt-work-as-expected



    • Edited by tbrandt30 Saturday, May 25, 2019 10:47 AM
    Saturday, May 25, 2019 10:39 AM