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

您尝试在mouseenter事件中触发mouseleave和resize个事件，而此事件一次不会触发。

您无需触发resize事件，只需完全触发mouseenter和mouseleave事件。

请参阅 JSFiddle

中的演示

Unbind（）不起作用

1 个答案: