1

私がこれまでに行っていることは、Firefox、および webkit ブラウザー (サファリ、およびクロム、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 で機能しないのですか? デバッグを開始しましたが、エラーは表示されず、ホバーイベントが発生するため、気が狂います

ここに私のライブの例があります

アップデート

テスト 私は、それが私に問題をもたらすイベントがマウスアウトであることを認識していmouseoverます。それでも良い結果が出ないmouseentermouseleavemouseout

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

ライブ例の私の最後のバージョン

4

2 に答える 2

0

anchor <a>私はあなたのフィドルの例をあまり見ていませんが、私が理解しているように、バージョン6までのIEはタグを除いてホバーをサポートしていません。また、それ以降のバージョンではバグが報告されています。

詳細については、これを確認してくださいhttp://reference.sitepoint.com/css/pseudoclass-hover

于 2012-10-15T18:49:02.207 に答える
0

最後に、セレクターを変更し、リスナーをアタッチする方法で問題を解決しました

$('.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/

于 2012-10-16T01:49:44.547 に答える