懸停不工作在IE11和邊緣

我想通過使用媒體查詢使iframe擴展並縮小鼠標指針在iframe上時。懸停不工作在IE11和邊緣

但是，它不起作用，但是，當鼠標指向框架邊框時，它會展開並收縮。

劑量誰知道如何解決這個問題在IE11和邊緣？

另外，由於相同的原始策略，我無法在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

你按F12給開發者控制檯檢查你的JavaScript錯誤？ – mahlatse

我發現，你可以使用jQuery來添加一個類hover將包含延長iframe所需的CSS。

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

有了這個功能，我們簡單地告訴一類hover添加到我們的#sidebanner ID

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

來源

2017-09-15 06:51:30

非常感謝您的幫助。但是，我不能在iframe之外使用jQuery。所以，我可能需要修復css來實現這個動畫。 –

從我研究，我無法找到'：懸停'工作的IE瀏覽器/邊緣'iframe'沒有jquery –

感謝您的幫助。我非常感謝你的幫助。我也無法找到任何解決方案。 –

我添加和刪除懸停和鼠標離開事件「hoveranimation」級對應。

，並增加了「＃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>

來源

2017-09-15 07:01:51

感謝您的幫助，不幸的是，出於安全原因，我們只能使用CSS懸停iframe。所以....你認爲你可以沒有jQuery？ –

懸停不工作在IE11和邊緣

回答

相關問題