悬停在IE11和Edge上不起作用 [英] Hover is not working on IE11 and Edge
问题描述
我试图通过使用媒体查询来使iframe扩展并缩小鼠标指针在iframe上。
然而，它不起作用，但是，当鼠标指向框架边框，然后扩展并缩小。
有人知道如何在IE11和Edge上修复此问题吗？
另外，由于相同的原始策略，我无法在iframe之外使用jQuery。所以，我可能不得不修复css来实现这个动画。
< pre class =snippet-code-html lang-html prettyprint-override HTML> < HEAD> < style type =text / css> iframe [id ^ = sidebanner] {width：80px; } iframe＃sidebanner {right：0; } iframe [id ^ = sidebanner]：hover {width：auto; -webkit-transition：宽度缓和0.1s; -moz-transition：宽度缓和0.1s; -ms-transition：宽度缓和0.1s; -o-transition：宽度缓和0.1s;过渡：宽度缓出0.1秒; } @media all和（max-width：2500px）{iframe [id ^ = sidebanner]：hover {width：50％; }} @media all和（max-width：900px）{iframe [id ^ = sidebanner]：hover {width：55％; }} @media all和（max-width：800px）{iframe [id ^ = sidebanner]：hover {width：60％; }} @media all和（max-width：750px）{iframe [id ^ = sidebanner]：hover {width：65％; }} @media all和（max-width：700px）{iframe [id ^ = sidebanner]：hover {width：70％; }} @media all和（max-width：650px）{iframe [id ^ = sidebanner]：hover {width：75％; }} @media all和（max-width：600px）{iframe [id ^ = sidebanner]：hover {width：80％; }}< / style> < /头> <身体GT; < iframe id =sidebannersrc =frameborder =1marginwidth =0marginheight =0scrolling =noallowtransparency =truestyle =top：0px; height：100％; right ：0px;>< / iframe> < /体> < / html>
我发现你可以使用jquery添加一个class hover ，它将包含扩展 iframe所需的css >。
$ b
$（'＃sidebanner'）。hover（
function（）{$（this）.addClass （'hover'）}，
function（）{$（this）.removeClass（'hover'）}
）
使用这个函数，我们只需要向我们的 #sidebanner hover c> id
您还需要将css添加到 hover 类中。这将与 iframe [id ^ = sidebanner]：hover 中使用的css相同。还要将 hover 类添加到 @media 查询中。
.hover {
-webkit-transition：width ease-in-out 0.1s;
-moz-transition：宽度缓出0.1s;
-ms-transition：宽度缓入0.1s;
-o-transition：宽度缓出0.1s;
转换：宽度缓出0.1s;
}
示例： https://jsfiddle.net/c9syw731/2/
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.
Dose anyone know how to fix this on IE11 and Edge?
Also, there is limitation that I can not use jQuery outside the iframe because of same origin policy. So, I might have to fix css to implement this 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>
I found out that you can use jquery to add a class hover that will contain the css needed to extend the iframe.
$('#sidebanner').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
With this function we simply tell to add a class hover to our #sidebanner id
You also need to add css to the hover class. This will be the same css used in iframe[id^=sidebanner]:hover. Also add the hover class to your @media queries.
.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;
}
Example: https://jsfiddle.net/c9syw731/2/
这篇关于悬停在IE11和Edge上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
