javascript 悬停时的颜色到灰度在 IE11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29166214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Color to grayscale on hover not working in IE11
提问by J82
I'm using Grayfor a few elements on the site. However, I can't get it to work in IE11. For example, in the fiddle below, I use JS to add the grayscaleand grayscale-fadeclasses so that the image fades from color to grayscale on hover. How would I get this to work in IE11? The author says that the plugin needs to be initialized for IE11 (i.e. $('article.project img').gray();), but if I add that line, all of the images turn gray by default from the start. I just want this to work in IE11. Can someone show me how?
我将Gray用于网站上的一些元素。但是，我无法在 IE11 中使用它。例如，在下面的小提琴中，我使用 JS 添加grayscale和grayscale-fade类，以便图像在悬停时从彩色渐变为灰度。我如何让它在 IE11 中工作？作者说插件需要为IE11（即$('article.project img').gray();）初始化，但是如果我添加那行，所有图像从一开始就默认变成灰色。我只是想让它在 IE11 中工作。有人可以告诉我怎么做吗？
Fiddle: http://jsfiddle.net/61jcam54/
小提琴：http: //jsfiddle.net/61jcam54/
HTML
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
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
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();
});
采纳答案by Josh Crozier
TL;DR
TL; 博士
Here is an updated example that works in IE11and all other supported browsers.
Exaplaination
说明
There were a few issues...
有几个问题...
According to the plugin that you are using, when the browser doesn't support CSS3 filters (like in IE10/11) the following applies:
根据您使用的插件，当浏览器不支持 CSS3 过滤器（如在 IE10/11 中）时，以下适用：
...the plugin uses
Modernizr._prefixes,css-filters,Inline SVGandsvg-filtersfeature 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.
...该插件使用
Modernizr._prefixes，css-filters，Inline SVG和svg-filters从Modernizr的功能检测，以确定浏览器的支持。如果浏览器支持内联 SVG 和 SVG 过滤器但不支持 CSS 过滤器，则插件会用过滤器替换带有 SVG 元素的元素。
Since the imgelement needs to be replaced with an SVG element in IE11, the plugin script (with Modernizrshiv) is required in order for it to work. In the jsFiddle example you provided, the script jquery.gray.min.jsactually wasn't even being executed in IE11 since it was blocked due to mismatched mime types (this warning was in the console).
由于该img元素需要在 IE11 中替换为 SVG 元素，因此需要插件脚本（使用Modernizrshiv）才能使其工作。在您提供的 jsFiddle 示例中，该脚本jquery.gray.min.js实际上甚至没有在 IE11 中执行，因为它由于 MIME 类型不匹配而被阻止（此警告在控制台中）。
To work around this, I just copy/pasted the script into the example. In addition, it's worth noting that the Modernizr docsstate that the script mustexecute beforethe <body>loads. This seems to be relevant in IE when using a HTML5 Shiv:
为了解决这个问题，我只是将脚本复制/粘贴到示例中。此外，值得一提的是，Modernizr的文档状态脚本必须执行之前的<body>负载。当使用 HTML5 Shiv 时，这似乎与 IE 相关：
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.
我们建议将 Modernizr 放在头部的原因有两个：HTML5 Shiv（在 IE 中启用 HTML5 元素）必须在 之前执行
<body>，并且如果您正在使用 Modernizr 添加的任何 CSS 类，您会想要防止 FOUC。
Now that the script is actually being executed in IE11, the plugin needs to be initialized and the imgelement needs to be replaced with an SVG. According to the plugin, the imgelements will automatically be replaced if the element has the class .grayscale. Alternatively, it also looks like you can use the custom .gray()method, too. Since your example wasn't actually giving the class .grayscaleto the imgelement, it wouldn't have being initialized in IE11.
现在脚本实际上是在 IE11 中执行的，插件需要初始化，img元素需要替换为 SVG。根据插件，img如果元素具有 class ，则元素将自动替换.grayscale。或者，您似乎也可以使用自定义.gray()方法。由于您的示例实际上并未将类提供.grayscale给img元素，因此它不会在 IE11 中进行初始化。
Below, you will notice that I added the class .grayscaleto the imgelement (in order to initialize it in IE11). In addition, the class .grayscale-offis also added to the element in order for the gray effect to be offinitially. In the updated jQuery, you will see that this class is just toggled.
在下面，您会注意到我将类添加.grayscale到img元素中（以便在 IE11 中对其进行初始化）。此外，该类.grayscale-off也被添加到元素中，以便最初关闭灰色效果。在更新的 jQuery 中，您将看到这个类刚刚被切换。
Here is the relevant updated HTML/CSS/jQuery:
这是相关更新的 HTML/CSS/jQuery：
I also shortened the jQuery a little too:
我也稍微缩短了 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>
回答by Tolokoban
IE prefers SVG to add filters on images. Here is a way to achieve this on IE10, Firefox and Chrome: http://jsfiddle.net/azx3mxmt/3/
IE 更喜欢 SVG 在图像上添加过滤器。这是在 IE10、Firefox 和 Chrome 上实现此目的的方法：http: //jsfiddle.net/azx3mxmt/3/
Pictures are added programmatically like this:
图片是这样以编程方式添加的：
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 filters are set like this:
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>
Other effects can be achieved with SVG. Look at this web site.
使用 SVG 可以实现其他效果。看看这个网站。
