IE11とEdgeでホバーが動作しない

メディアクエリを使用してiframeにマウスポインタがあるとき、iframeを展開して縮小しようとしています。IE11とEdgeでホバーが動作しない

しかし、動作していませんが、マウスポインターが枠の境界にある場合は、拡大して縮小します。

誰もが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>

出典

2017-09-15 Leo S

をCSSに "＃のsidebanner.hoveranimation" を追加あなたはデベロッパーコンソールにF12を押すことで、あなたのjavascriptのエラーをチェックしましたか？ – mahlatse

私はあなたがiframeを拡張するために必要なCSSが含まれていますクラスhoverを追加するためにjqueryのを使用できることが分かりました。

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

この機能により、我々は、単にあなたがまたhoverクラスにCSSを追加する必要が私たちの#sidebanner ID

にクラスhoverを追加するために教えてください。これはiframe[id^=sidebanner]:hoverで使用されているものと同じです。また、@mediaクエリにhoverクラスを追加します。

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

出典

2017-09-15 06:51:30

ありがとうございました。しかし、iframeの外ではjQueryを使用できないという制限があります。ですから、私はこのアニメーションを実装するためにCSSを修正する必要があります。 –

私は調査したところから、jqueryなしでIE/Edge上の 'iframe'で動作する'：hover'メソッドを見つけることができませんでした –

助けてくれてありがとう。私は本当にあなたの助けに感謝します。私もこのための解決策を見つけることができませんでした。 –

私が追加され、それに対応ホバーとマウス休暇イベントの "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>

出典

2017-09-15 07:01:51

ご協力いただきありがとうございます。残念ながら、セキュリティ上の理由から、iframeを有効にするためにのみCSSを使用できます。だから、あなたはjQueryなしでもできると思いますか？ –

IE11とEdgeでホバーが動作しない

答えて

関連する問題