Hover ne fonctionne pas sur IE11 et Edge

J'essaie de rendre l'iframe étendu et réduit lorsque le pointeur de la souris est sur l'iframe en utilisant la requête média.Hover ne fonctionne pas sur IE11 et Edge

Toutefois, il ne fonctionne pas, mais lorsque le point de la souris est sur la bordure du cadre, il est étendu et réduit.

Dose quelqu'un sait comment résoudre ce problème sur IE11 et Edge?

De plus, il y a une limitation à ce que je ne peux pas utiliser jQuery en dehors de l'iframe en raison de la même politique d'origine. Donc, je pourrais avoir à réparer css pour implémenter cette 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>

Source

2017-09-15 Leo S

Avez-vous vérifié vos erreurs javascript en appuyant sur F12 à la console développeur? – mahlatse

Je trouve que vous pouvez utiliser jquery ajouter une classe hover qui contiendra le code CSS nécessaire pour prolonger la iframe.

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

Avec cette fonction, nous disons simplement d'ajouter une classe hover à notre #sidebanner id

Vous devez également ajouter à la classe css hover. Ce sera le même css utilisé dans iframe[id^=sidebanner]:hover. Ajoutez également la classe hover à vos requêtes @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; 
    }

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

Source

2017-09-15 06:51:30

Merci beaucoup pour votre aide. Mais, il y a une limitation que je ne peux pas utiliser jQuery en dehors de l'iframe. Donc, je pourrais avoir à réparer css pour implémenter cette animation. –

de ce que j'ai recherché, je ne pouvais pas trouver une méthode pour le ': hover' pour travailler sur le' iframe' sur IE/Edge sans jquery –

Merci pour votre aide. J'apprécie vraiment votre aide. Je n'ai pas non plus trouvé de solution pour cela. –

I ajouté et supprimer la classe "hoveranimation" sur le vol stationnaire et événement congé de la souris en conséquence.

et a ajouté un "# sidebanner.hoveranimation" à 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>

Source

2017-09-15 07:01:51

Merci pour votre aide, Malheureusement, nous ne pouvons utiliser CSS pour survoler l'iframe pour des raisons de sécurité. Alors ... Pensez-vous que vous pouvez faire sans jQuery? –

Hover ne fonctionne pas sur IE11 et Edge

Répondre

Questions connexes