Javascript 悬停时的颜色到灰度在IE11中不起作用

我在网站上使用了一些元素。然而，我无法让它在IE11中工作。例如，在下面的小提琴中，我使用JS添加

灰度

和

灰度淡入

类，以便悬停时图像从颜色淡入灰度。我如何在IE11中实现这一点？作者说需要为IE11初始化插件（即，

$（'article.project img'）.gray（）；

），但如果我添加该行，所有图像从一开始就默认为灰色。我只想让它在IE11中工作。有人能告诉我怎么做吗

小提琴：

HTML

---

IE更喜欢SVG在图像上添加过滤器。 以下是在IE10、Firefox和Chrome上实现这一点的方法：

图片以编程方式添加，如下所示：

var container = document.getElementById("container");
var src = "https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG";
for (var i=200 ; i < 2200 ; i += 100) {
    container.appendChild(animation(src, i));   
}

<svg width="128" height="128" viewBox="0 0 128 128">
  <defs>
    <filter id="filter" >
      <feColorMatrix id="gray" type="saturate" values="0.5"/>
    <filter/>
  </defs>
  <image x="0" y="0" width="128" height="128"
         filter="url(#filter)"
         xlink:href="https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG"/>
</svg>

var container=document.getElementById（“容器”）；
var src=”https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG";
对于（变量i=200；i<2200；i+=100）{
appendChild（动画（src，i））；
}

SVG过滤器的设置如下：

var container = document.getElementById("container");
var src = "https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG";
for (var i=200 ; i < 2200 ; i += 100) {
    container.appendChild(animation(src, i));   
}

<svg width="128" height="128" viewBox="0 0 128 128">
  <defs>
    <filter id="filter" >
      <feColorMatrix id="gray" type="saturate" values="0.5"/>
    <filter/>
  </defs>
  <image x="0" y="0" width="128" height="128"
         filter="url(#filter)"
         xlink:href="https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG"/>
</svg>

使用SVG可以实现其他效果。看看这个。

TL；博士 下面是一个和所有其他受支持的浏览器

---

解释 有几个问题

根据，当浏览器不支持CSS3过滤器（如IE10/11）时，以下情况适用：

…该插件使用

modernizer.\u前缀

，

css过滤器

，

内联SVG

和

SVG过滤器

功能从modernizer检测以确定浏览器支持。如果浏览器支持内嵌SVG和SVG过滤器，但不支持CSS过滤器，则插件会使用过滤器替换SVG元素

由于IE11中的

img

元素需要替换为SVG元素，因此需要插件脚本（带shiv）才能工作。在您提供的JSFIDLE示例中，脚本

jquery.gray.min.js

实际上甚至没有在IE11中执行，因为它由于不匹配的mime类型而被阻止（此警告在控制台中）

为了解决这个问题，我只需将脚本复制/粘贴到示例中。此外，值得注意的是，在加载

之前，脚本必须执行的状态。当使用HTML5 Shiv时，这似乎与IE相关：

我们建议将Modernizr放在头部的原因有两个：HTML5 Shiv（在IE中启用HTML5元素）必须在

之前执行，如果您使用Modernizr添加的任何CSS类，您将希望防止FOUC

现在脚本实际上是在IE11中执行的，插件需要初始化，

img

元素需要替换为SVG。根据插件，如果元素具有类

.grayscale

，则

img

元素将自动替换。或者，您也可以使用自定义的

.gray（）

方法。由于您的示例实际上没有将类

.grayscale

赋予

img

元素，因此它不会在IE11中初始化

在下面，您会注意到我将类

.grayscale

添加到

img

元素中（以便在IE11中初始化它）。此外，还将类

.grayscale off

添加到元素中，以便最初关闭灰色效果。在更新的jQuery中，您将看到这个类只是被切换了一下

以下是相关更新的HTML/CSS/jQuery：

我还将jQuery缩短了一点：

$('#content').on('mouseenter mouseleave', 'article.project', function (e){
    $('.grayscale', this).toggleClass('hover grayscale-off');
    $(this).find('.post-link').toggle();
});

您可能想阅读以下内容：可能会有帮助。谢谢您，但我需要弄清楚如何初始化IE11的灰色插件。我不想实现另一种方法。我已经够糊涂了，谢谢你。有没有办法在我正在使用的现有插件中实现这一点？根据插件，IE11是受支持的，但需要初始化。对不起，我不熟悉这个插件。你应该直接问我。你可以给他我的代码：这是开源的。谢谢。您说，“或者，看起来您也可以使用custom.gray（）方法。”是否可以演示如何使用此方法，而不必加载最初为灰色的图像？我想不出来。@J82如果这个插件有一个回调或者可以连接到的东西，那就太好了。。甚至

.gray（）

方法的选项也可能有帮助。。似乎这是唯一的方法-

$（'img'）.gray（）.addClass（'grayscale-grayscale-off'）
$('#content').on('mouseenter mouseleave', 'article.project', function (e){
    $('.grayscale', this).toggleClass('hover grayscale-off');
    $(this).find('.post-link').toggle();
});

.grayscale.grayscale-replaced > svg {
    opacity: 0;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}
.grayscale.grayscale-replaced.grayscale-off > svg {
    opacity: 1;
}

<div id="content">
    <article class="project">
        <img width="375" height="375" class="grayscale grayscale-off" src="http://lorempizza.com/380/240" alt="image-title" />
        <div class="overlay">
            <h3>Project Title</h3>
            <a class="post-link expand" href="...">+</a>
        </div>
    </article>
</div>