我试图通过使用媒体查询在鼠标指针位于 iframe 上时扩展和收缩 iframe。
但是，它不起作用，但是，当鼠标点在框架边框上时，它会展开和收缩。
有人知道如何在 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>最佳答案
我发现您可以使用 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;
}
关于css - 悬停在 IE11 和 Edge 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46232707/