Question

我正在使用CSS / JQuery和图像精灵来为它提供图像淡入淡出交换效果。

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/

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

1 个答案: