jquery - 为什么 IE10 显示完全不同的东西

Question

我使用 CSS/JQuery 和图像 sprite 来给它一个图像淡入淡出交换效果。

JQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $('.otherbutton').append('<img class="hover" />').each(function () {
            var $span = $('> img.hover', this).css('opacity', 0);
            $(this).hover(function () {
                $span.stop().fadeTo(500, 1);
            }, function () {
        $span.stop().fadeTo(500, 0);
            });
        });
    });
</script>

CSS:

<style>
.otherbutton {
    clear: both;
    position:relative;
    display:block;
    height: 28px;
    width: 28px;
    background: #FFFFFF url(images/searchButton.png) no-repeat;
    background-position:0 0;
    cursor: pointer;
}   
.otherbutton img.hover {
    position: absolute;
    display: block;
    height: 28px;
    width: 28px;
    background: #FFFFFF url(images/searchButton.png) no-repeat;
    background-position: bottom;
}
</style>

HTML:

<span class="otherbutton"></span>

在 FF 中，图像显示正确，但对于 IE 8、9、10，悬停图像显示为 NOT FOUND。知道如何解决吗？

Answer 1

一种纯基于 CSS 的替代方案，应该适用于大多数现代浏览器(但不适用于 IE9 及以下版本):

HTML:

<span>
    <img src="/path/to/hover/image" />
    <img src="/path/to/image" />
</span>

CSS:

span {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
}

span img {
   position: absolute;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

span img:hover {
    opacity: 0;
}

JSFiddle:

http://jsfiddle.net/kn9FK/4/