Javascript 如何使jquery灰度变换效果仅在悬停后应用？

我正在尝试用灰度创建一个非常特殊的鼠标悬停效果。过渡应该是-一组在页面加载时是全彩色的图像，但当用户将鼠标悬停在图像上时，该图像保持彩色，但其他图像都变为灰度。我目前正在通过对包含所有图像的div应用灰度悬停效果来实现这一点，然后对悬停的特定图像取消此效果（使用变换：无或类似）

这适用于大多数浏览器，但我很难将其修改为适用于IE9-10。我正在使用此脚本使其跨浏览器

我在IE9-10中遇到的问题是，在页面加载时，图像是灰度的，而不是彩色的。除此之外，一切正常。是否有办法修改此脚本，使其仅在周围div悬停时显示

我不能使用背景图像或精灵，因为我也在使用旋转木马脚本

作为参考，这是相关代码（除了上面链接的脚本）：

和css：

.personalities:hover .grayscale img {
    -webkit-filter: grayscale(100%); /* Webkit Nightlies & Google Chrome Canary */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    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"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE8-9 */
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.personalities .grayscale img:hover {
    filter: none; /* Applies to FF + IE */
    -webkit-filter: grayscale(0);
}

。个性：悬停。灰度img{
-webkit过滤器：灰度（100%）；/*webkit睡衣和谷歌Chrome金丝雀*/
-webkit背面可见性：隐藏；/*修复过渡闪烁*/
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 10+，Android上的Firefox*/
过滤器：灰色；/*IE8-9*/
-webkit过渡：所有0.6秒轻松；
-moz转换：所有0.6秒的易用性；
-ms转换：所有0.6s的易用性；
-o型过渡：所有0.6s的轻松度；
过渡期：所有0.6秒缓解；
}
.个性。灰度图像：悬停{
过滤器：无；/*适用于FF+IE*/
-webkit过滤器：灰度（0）；
}

.personalities:hover .grayscale img {
    -webkit-filter: grayscale(100%); /* Webkit Nightlies & Google Chrome Canary */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    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"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE8-9 */
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.personalities .grayscale img:hover {
    filter: none; /* Applies to FF + IE */
    -webkit-filter: grayscale(0);
}