Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - 响应式网站 : how to keep on mobile, 默认悬停层元素 "on"

In lại Tác giả: Walker 123 更新时间：2023-11-28 08:19:15 25 4
mua khóa gpt4 Nike

在我的网站上，有些元素图标在鼠标悬停时有一个层，显示标题。

我想要的是在移动设备上查看网站时始终保持该层。

这段 javascript 代码显然可以处理这种效果:

/* Set Default Text Color for all elements */
        $(".ut-hover").each(function(index, element) {

            var text_color = $(this).closest('.ut-portfolio-wrap').data('textcolor');

            $(this).find(".ut-hover-layer").css({ "color" : text_color });
            $(this).find(".ut-hover-layer").find('.portfolio-title').attr('style', 'color: '+text_color+' !important');

        });     

        $('.ut-hover').on('mouseenter touchstart', function() {     
            var hover_color = $(this).closest('.ut-portfolio-wrap').data('hovercolor'),
                hover_opacity = $(this).closest('.ut-portfolio-wrap').data('opacity');

            $(this).find(".ut-hover-layer").css( "background" , "rgba(" + hover_color + "," + hover_opacity+ ")" );
            $(this).find(".ut-hover-layer").css( "opacity" , 1 );           

        });

        $('.ut-hover').on('mouseleave touchend', function() { 

            $(this).find(".ut-hover-layer").css( "opacity" , 0 );

        });

包含文本的图层的CSS是“ut-hover-layer”

我需要修改该脚本以便在移动屏幕上看到该网站，“ut-hover-layer”在加载时可见并始终保持不变，因此鼠标悬停不应该发生。

任何人都会有实现该目标的解决方案吗？

如果有帮助，这里是 liên kết到网站

Cảm ơn trước!

câu trả lời hay nhất

根据堆栈上的另一个答案 (What is the best way to detect a mobile device in jQuery?)，您应该检测显示页面的设备是否是智能手机，如果是，您应该将 ut-hover-layers opacity 设置为 1，如下所示:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ) {
    jQuery( '.ut-hover-layer' ).each( function() { 
        jQuery( this ).css( 'opacity', '1' ).css( 'background' , 'rgba( 242, 35, 244, 0.8 )' ); 
    });
}

但是我认为如果您尝试以这种方式检测智能手机:

if( jQuery( window ).width() < 768 ) { 
    jQuery( '.ut-hover-layer' ).each( function() { 
        jQuery( this ).css( 'opacity', '1' ).css( 'background' , 'rgba( 242, 35, 244, 0.8 )' ); 

    });
}

它仍然有效。

也是纯js方式

if( document.body.clientWidth < 768 ) {
    var elems = document.getElementsByClassName( 'ut-hover-layer' ), 
        i = 0;

    for( ; i < elems.length; i += 1 ) {
        elems[i].style.background = 'rgba( 242, 35, 244, 0.8 )';
        elems[i].style.opacity = '1';
    }
}

另一种选择是进行媒体查询并将其放入您的 CSS:

@media screen and (max-width: 1024px) and (min-width: 481px)
    .ut-hover-layer {
        opacity: 1!important;
        trên cùng: 50%;
        background: rgba(242, 35, 244, 0.8);
    }
}

但是你的代码中会有一些无用的处理程序。

希望我能正确理解您的意思，这对您有所帮助。

关于javascript - 响应式网站 : how to keep on mobile, 默认悬停层元素 "on"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28843269/

25 4 0
Đề xuất bài viết: javascript - 切换 js 和可扩展的 div
Đề xuất bài viết: ios - 更改导航栏高度
Đề xuất bài viết: javascript - Firefox 插件 SDK 替换请求
Đề xuất bài viết: c++ - FLV & F4V开源C++解码器
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress