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

Question

我将Gray 用于网站上的一些元素。但是，我无法让它在 IE11 中工作。例如，在下面的小提琴中，我使用 JS 添加了 grayscale 和 grayscale-fade 类，以便图像在悬停时从彩色渐变为灰度。我如何让它在 IE11 中工作？作者说插件需要为 IE11 初始化（即$('article.project img').gray();），但是如果我添加该行，则默认情况下所有图像从一开始就变成灰色。我只是想让它在 IE11 中工作。谁能告诉我怎么做？

小提琴：http://jsfiddle.net/61jcam54/

HTML

<div id="content">
    <article class="project">
        <img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title">
        <div class="overlay" style="margin-left: -1px; width: 367px;">
            <h3>Project Title</h3>
            <a class="post-link expand" href="http://google.com">+</a>
        </div>
    </article>
</div>

CSS

article.project {
  float: left;
  margin: 0 1% 2%;
  max-width: 375px;
  overflow: hidden;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

article.project img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

article.project .overlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.hover .overlay, .active .overlay, .hover-sticky .overlay {
    opacity: 1;
}

article.project .overlay h3 {
  color: #FFF;
  font-size: 17px;
  font-size: 1.7rem;
  font-family: 'Montserrat',sans-serif;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 3.3em;
  padding: 0 1em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

article.project .overlay .expand {
  border: 5px solid #FFF;
  bottom: 0;
  color: #FFF;
  display: block;
  font-size: 30px;
  height: 60px;
  left: 0;
  line-height: 50px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 60px;
  z-index: 2;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}

/* GRAYSCALE */
.grayscale, .grayscale-sticky {
    /* Firefox 10+, Firefox on Android */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

    /* IE 6-9 */
    filter: gray;

    /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
    */
    -webkit-filter: grayscale(100%);
}

.grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .2s;
}

.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced {
    filter: none;
    -webkit-filter: none;
}

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

.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
    opacity: 0;
}

JS

$('#content').on('mouseenter', 'article.project', function(){

    $(this).addClass('hover grayscale grayscale-fade');
    $(this).find('.post-link').hide();

}).on('mouseleave', 'article.project', function(){

    $(this).removeClass('hover grayscale grayscale-fade');
    $(this).find('.post-link').show();

});

Answer 1

TL;DR

这是updated example that works in IE11 和所有其他支持的浏览器。

---

说明

有一些问题...

根据the plugin that you are using，当浏览器不支持 CSS3 过滤器（如在 IE10/11 中）时，以下适用：

...插件使用从 Modernizr 检测到的 Modernizr._prefixes、css-filters、Inline SVG 和 svg-filters 功能来确定浏览器支持。如果浏览器支持内联 SVG 和 SVG 过滤器但不支持 CSS 过滤器，则插件会将元素替换为带有过滤器的 SVG 元素。

由于img 元素需要在 IE11 中替换为 SVG 元素，因此需要插件脚本（带有Modernizr shiv）才能使其工作。在您提供的 jsFiddle 示例中，脚本 jquery.gray.min.js 实际上甚至没有在 IE11 中执行，因为它由于 mime 类型不匹配而被阻止（此警告在控制台中）。

为了解决这个问题，我只是将脚本复制/粘贴到示例中。此外，值得注意的是Modernizr docs 声明脚本必须 在<body> 加载之前执行。使用 HTML5 Shiv 时，这似乎与 IE 相关：

我们建议将 Modernizr 放在头部的原因有两个：HTML5 Shiv（在 IE 中启用 HTML5 元素）必须在 <body> 之前执行，并且如果您使用任何在 Modernizr 添加的 CSS 类中，您需要防止 FOUC。

现在脚本实际上是在 IE11 中执行的，需要初始化插件并且需要将 img 元素替换为 SVG。根据该插件，如果元素具有类.grayscale，则img 元素将被自动替换。或者，您也可以使用自定义 .gray() 方法。由于您的示例实际上并未将 .grayscale 类赋予 img 元素，因此它不会在 IE11 中被初始化。

下面，您会注意到我将.grayscale 类添加到img 元素中（以便在IE11 中对其进行初始化）。此外，.grayscale-off 类也被添加到元素中，以使灰色效果最初关闭。在更新后的 jQuery 中，你会看到这个类只是被切换了。

这里是相关更新的 HTML/CSS/jQuery：

Updated Example Here

我也稍微缩短了 jQuery：

$('#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>

Answer 2

IE 更喜欢 SVG 在图像上添加过滤器。 这是在 IE10、Firefox 和 Chrome 上实现此目的的一种方法：http://jsfiddle.net/azx3mxmt/3/

图片是这样以编程方式添加的：

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 滤镜设置如下：

<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 可以实现其他效果。看看这个web site。