iframe悬停不透明度更改在Microsoft Edge中不起作用

Question

我有一个简单的类在css中为iframe定义，该iframe包含从Smugmug中提取的幻灯片。当用户将鼠标悬停在幻灯片上并且当用户将鼠标悬停在iframe区域上时转换为100％不透明度时，基本功能是25％的不透明度。这适用于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，如果我找到了什么，我会告诉你的。