Question

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

这适用于大多数浏览器，但我无法将其修改为在IE9-10中运行。我正在使用此脚本http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/使其成为跨浏览器。

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

由于我也在使用旋转木马脚本，我无法使用背景图片或精灵。

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

foreach($array as $val)

$val->property

和css：

<div id="personalities" class="personalities">
    <div id="person-ebanking">
        <a href="#ebanking" id="link-ebanking" class="grayscale"><img src="images/personalities-ebanking.png" width="204" height="590" alt="eBanking" id="img-ebanking" /></a>
    </div>
    <div id="person-emobile">
        <a href="#emobile" id="link-emobile" class="grayscale"><img src="images/personalities-emobile.png" width="180" height="590" alt="eMobile"  id="img-emobile"/></a>
    </div>
    <div id="person-edeposits">
        <a href="#edeposits" id="link-edeposits" class="grayscale"><img src="images/personalities-edeposit.png" width="204" height="590" alt="eDeposit" id="img-edeposits"/></a>
    </div>
    <div id="person-epay">
        <a href="#epay" id="link-epay" class="grayscale"><img src="images/personalities-epay.png" width="176" height="590" alt="ePay" id="img-epay"/></a>
    </div>
    <div id="person-estatements">
        <a href="#estatements" id="link-estatements" class="grayscale"><img src="images/personalities-estatements.png" width="234" height="590" alt="eStatements" id="img-estatements"/></a>
    </div>
</div>

如何让jquery灰度转换效果仅在悬停后应用？

0 个答案: