Javascript 响应网站：如何保持移动，悬停层元素默认为“开”

在我的网站上，有一些项目图标在鼠标上方有一层，显示标题

我想要的是，在手机上查看网站时，该层始终存在

有一段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悬停层在加载时是可见的，并且始终保持不变，因此不应该发生鼠标悬停

有人会有一个解决方案来实现这一点吗

如果这有帮助的话，这里是网站的链接

---

提前谢谢

根据stack上的另一个答案，您应该检测显示页面的设备是否是智能手机，如果是，您应该将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 )' ); 

    });
} 

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

---

我希望我能正确地理解你，这会有所帮助

非常感谢！我尝试了CSS，但效果不是100%。事实上，在这个解决方案中，我需要将鼠标放在缩略图上，它才会出现，然后，它就会保持不变。我需要的是在页面加载时设置图层。另外，我尝试了javascript，但没有更好。当您将浏览器窗口调整为手机大小时，您可以在该页面上看到结果。还有别的想法吗？提前谢谢。@Wordpress人好的，所以我编辑了一下我的答案。现在就试试吧：效果很好！非常感谢

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';
    }
}

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