Question

我到目前为止所做的工作在Firefox和webkit浏览器（safari和chrome，未在maxthone中测试）工作得很好实际上它非常简单我只是添加一个事件悬停改变库中的宽度和高度获得空间并让图像与Jqzoom的变焦一起出现。

这就是

所需的所有javascript代码

$(document).ready(function () {
$('.ad-gallery').adGallery({
    callbacks:
        {
            afterImageVisible: function () {
                $('div.ad-image a').jqzoom({
                    zoomType: 'reverse',
                    preloadText: locale.gallery.preloadText,
                    title: false,
                    zoomWidth: 500,
                    zoomHeight: 300,
                    preloadImages: true
                });

                $("div.zoomPad img").hover(function () {
                    var $container = $("div.ad-image");
                    $container.css('width', '850px').css('height', '302px');
                    $container.parent().css('width', '850px').css('height', '302px');
                    $('div.ad-prev').css('width', '25px');
                }, function () {
                    var $container = $("div.ad-image");
                    $container.css('width', '300px').css('height', '300px');
                    $container.parent().css('width', '300px').css('height', '300px');
                    $('div.ad-prev').css('width', '25px');
                });
            }
        }

    });
});

现在我的问题是为什么这在IE中不起作用？我开始调试，但我没有看到任何错误，这让我发疯，因为它被解雇的悬停事件

Here's my live example

更新

测试我意识到它给我带来麻烦的事件是鼠标输出所以我改变了一点代码至少工作mouseover或mouseenter我试过{{1 }和mouseleave事件。仍然没有好结果

mouseout

我的上一个版本of live exmaple

Answer 1

我没有太多关注你的小提琴示例，但据我所知，除了anchor <a>标签之外，IE版本不支持hover。后来的版本也报告了错误。

查看此详细信息http://reference.sitepoint.com/css/pseudoclass-hover

Answer 2

最后我通过更改选择器以及如何附加监听器来解决我的问题

$('.ad-gallery').adGallery({
animate_first_image: true,
callbacks: {
    afterImageVisible: function() {
        $('div.ad-image a').jqzoom({
            zoomType: 'standar',
            preloadText: locale.gallery.preloadText,
            title: false,
            zoomWidth: 500,
            zoomHeight: 300,
            preloadImages: true
        });

        $("div.zoomPad").mouseenter(function() {
            var $container = $("div.ad-image");
            $container.css('width', '850px').css('height', '350px');
            $container.parent().css('width', '850px').css('height', '350px');
            $('div.ad-prev').css('width', '25px');
        }).mouseleave(function() {
            var $container = $("div.ad-image");
            $container.css('width', '300px').css('height', '300px');
            $container.parent().css('width', '300px').css('height', '300px');
            $('div.ad-prev').css('width', '25px');
        });
    }
}

});

这是我的实例

http://jsfiddle.net/justelnegro/KU6NU/20/

集成JqZoom和Jquery广告库

2 个答案: