Unbind()不起作用

Question

在my page上，悬停三个彩色矩形中的任何一个都会触发jQuery代码，该代码会隐藏图像并显示一些文本。在移动设备上，我不想运行这段代码，所以我在resize()上执行代码，并且只在桌面分辨率下运行它。

但它不工作，由于某些原因，代码运行的都是大小写。

JS：

jQuery(document).ready(function($) {

    vertical_hover();
    $(window).on('resize', vertical_hover);

    function vertical_hover() {

        if ( window.innerWidth > 800 ) { 

            $( '.vertical_wap_inner' ).on({
                mouseenter: function () {
                    $(this).find( '.vertical_wap_inner_title' ).fadeOut(200);
                    $(this).find( 'img' ).css('visibility','hidden')
                    $(this).find( '.vertical_wap_inner_text' ).fadeIn(200);
                },
                mouseleave: function () {
                    $(this).find( '.vertical_wap_inner_title' ).fadeIn(200);
                    $(this).find( 'img' ).css('visibility','visible')
                    $(this).find( '.vertical_wap_inner_text' ).fadeOut(200);
                }
            });     

        }
        else { 

            $( '.vertical_wap_inner_title, .vertical_wap_inner img, .vertical_wap_inner_text' ).unbind();

        }

    }

});

Answer 1

您尝试在resize事件中触发mouseenter和mouseleave事件，而此事件不会同时触发。

你不需要触发resize事件，只需要完全触发mouseenter和mouseleave事件即可。

查看中的演示