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

Question

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

Fiddle: 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

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.

Answer 2

TL;DR

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

解释

有一些问题...

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

...the plugin uses Modernizr._prefixes, css-filters, Inline SVG and svg-filters feature detects from Modernizr to determine browser support. If a browser supports inline SVG and SVG filters but not CSS filters, the plugin replaces the elements with SVG elements with filters.

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

为了解决这个问题，我只是 copy/pasted 将脚本添加到示例中。此外，值得注意的是 Modernizr docs 声明脚本必须在 之前执行 <body> 负载。这似乎在 IE 中使用 HTML5 Shiv:

时是相关的

The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC.

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

下面，您会注意到我将 class .grayscale 添加到 img 元素（以便在 IE11 中对其进行初始化）。另外，在元素中也加入了class.grayscale-off，让灰度效果一开始就off。在更新后的 jQuery 中，您会看到这个 class 刚刚被切换。

这里是相关的更新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>

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

Color to grayscale on hover not working in IE11

javascript

jquery

css

grayscale

TL;DR

解释