css - Iframe 悬停不透明度更改在 Microsoft Edge 中不起作用

Question

我在 css 中为 iframe 定义了一个简单的类，它包含从 Smugmug 中提取的幻灯片。当用户没有悬停在幻灯片上时，基本功能是 25% 的不透明度，当用户悬停在 iframe 区域上时，过渡到 100% 的不透明度。这适用于 Chrome、Firefox 和 Safari，但不适用于 Microsoft Edge。在 Edge 中，我获得了 25% 的不透明度和过渡效果，但悬停不会提升不透明度。

有谁知道为什么 Edge 不起作用？我是否遗漏了一些针对 Edge 浏览器的指令？

这是一个 iframe 的例子。 . .

<div id=avalon class="slide">
  <iframe src="https://johndoc1.smugmug.com/frame/slideshow?   key=M9jkGB&autoStart=1&captions=1&navigation=1&playButton=1&randomize=0&speed=4&transition=fade&transitionSpeed=2" width="1100" height="825" frameborder="no" scrolling="no"></iframe>
</div>

这是幻灯片类的 CSS。 . .

/* Slideshow style */

.slide {
width:80%;
margin-left:auto;
margin-right:auto;
background: #2F4538;
   }

.slide iframe{
opacity:0.25;
transition: opacity 0.5s linear;
max-height: 100%;
max-width: 100%;
}

.slide iframe:hover{
    opacity:1.0;
}

谢谢。约翰博士

Answer 1

我知道这实际上不是很干净，但我尝试了几件事，但我无法让它仅通过 css 运行。也许 Edge 在渲染核心中缺少一些指令……谁知道呢。

无论如何......我能够通过javascript运行它，在这个解决方案中我使用jQuery因为它更接近我，我会尽快添加纯JS解决方案，为什么jsfiddle看不到我声明的函数.. .

所以 - 这里是: https://jsfiddle.net/f4y0uugc/2/

请注意，jQuery 代码必须准备好文档。

这些是主要的变化:

  $(".slide iframe").on("mouseover", function(){

$(this).addClass("slideiframe");
});

$(".slide iframe").on("mouseout", function(){
$(this).removeClass("slideiframe");
});

刚刚添加了css

    .slideiframe{
    opacity:1.0 !important;
}

//编辑 - 纯 JS

好的，这是一个纯粹的解决方案: https://jsfiddle.net/f4y0uugc/4/

这里有你的 JS:

var slide;

function op025(){
slide = document.getElementsByClassName("slide")[0].getElementsByTagName("iframe")[0];
slide.style.opacity = 0.5;
}

function op1(){
slide = document.getElementsByClassName("slide")[0].getElementsByTagName("iframe")[0];
slide.style.opacity = 1;
}

请注意，类和元素是数组，哟，如果您有多个匹配项，则必须添加 ID，或者为每个解决方案循环迭代。

接下来，您必须设置函数调用，因此在 html 中:

<div id=avalon class="slide">
  <iframe onmouseover="op1();" onmouseout="op025();" src="https://johndoc1.smugmug.com/frame/slideshow?   key=M9jkGB&autoStart=1&captions=1&navigation=1&playButton=1&randomize=0&speed=4&transition=fade&transitionSpeed=2" width="1100" height="825" frameborder="no" scrolling="no"></iframe>
</div>

此外，对于这两种解决方案，由于这是脚本化解决方案，我已将过渡持续时间减少到 0.2 秒，就好像用户快速将光标移到边缘上一样，不透明度行为不干净。

我会尝试更多纯 css 的东西，如果我发现了什么，我会告诉你。