javascript - 集成 JqZoom 和 Jquery Ad Gallery

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 上工作我尝试使用 mouseleave 和 mouseout 事件。仍然没有好的结果

    $('.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
                    });

                    if (!$.browser.msie) {
                        $("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');
                        });
                    }
                    else {
                        $("div.zoomPad img").on({
                            mouseenter: 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');
                            }
//                            ,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');
//                            }
                        });

我的最后一个版本 of live exmaple

Answer 1

我没怎么看你的 fiddle 例子，但据我所知，IE 版本 6 不支持悬停，除了 anchor <a>。标签。以后的版本也报告了错误。

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