将鼠标悬停在js上，并在移动设备上出现问题

Question

我在投资组合页面中的joomla模板有问题。 问题的描述非常简单：在pcs设备上，当您将鼠标移到（图片库中的）照片上时，会出现一个暗窗口（悬停效果），允许用户放大照片或输入照片的详细信息（在以半透明效果显示的暗窗口中，有两个图标管理着这两个选项）。 分辨率低于768像素时，悬停操作显然不起作用（已在移动设备上完成），如果我单击照片，它表示无法加载内容。 当我使用移动设备单击照片时，将出现一个暗窗口，并向我显示两个图标，这些图标使我可以缩放照片或输入详细信息。 该机制由作者创建的自定义js控制，以管理效果，但是我对JavaScript的了解不多。您能帮我吗？ 脚本是：

    var currentWindowWidth = $f(window).width();
     if(currentWindowWidth >= 768){
    $f('.viewport').mouseenter(function(e) {
        $f(this).children('a').children('img').animate({ height: '178',   left: '-20', top: '-20', width: '260'}, 100);
        $f(this).children('span').fadeIn(200);
        $f(this).children('span').addClass('dark-background');
    }).mouseleave(function(e) {
        $f(this).children('a').children('img').animate({ height: '138', left: '-0', top: '0', width: '220'}, 100);
        $f(this).children('span').fadeOut(200);
        $f(this).children('span').removeClass('dark-background');
    });
}

如果您能帮助我，我将不胜感激。 谢谢你们

Answer 1

我会尝试使用touchend事件，以便当移动/触摸用户触摸图像时，他们会收到效果。

var currentWindowWidth = $f(window).width();
//if(currentWindowWidth >= 768){
    $f('.viewport').on("mouseenter touchend", function(e) {
        $f(this).children('a').children('img').animate({ height: '178',   left: '-20', top: '-20', width: '260'}, 100);
        $f(this).children('span').fadeIn(200);
        $f(this).children('span').addClass('dark-background');
    }).mouseleave(function(e) {
        $f(this).children('a').children('img').animate({ height: '138', left: '-0', top: '0', width: '220'}, 100);
        $f(this).children('span').fadeOut(200);
        $f(this).children('span').removeClass('dark-background');
    });
//}

这不会消除效果，因此，如果移动/触摸用户触摸多幅图像-他们触摸的每一幅图像都会获得变暗的效果。

编辑： tomjm也提出了一个很好的观点。 您需要删除if语句

Answer 2

注释掉或删除if

 // var currentWindowWidth = $f(window).width();
 // if(currentWindowWidth >= 768){
$f('.viewport').mouseenter(function(e) {
    $f(this).children('a').children('img').animate({ height: '178',   left: '-20', top: '-20', width: '260'}, 100);
    $f(this).children('span').fadeIn(200);
    $f(this).children('span').addClass('dark-background');
}).mouseleave(function(e) {
    $f(this).children('a').children('img').animate({ height: '138', left: '-0', top: '0', width: '220'}, 100);
    $f(this).children('span').fadeOut(200);
    $f(this).children('span').removeClass('dark-background');
});

//}