Javascript js上的悬停效应和移动设备问题

我对公文包页面中的joomla模板有问题。 问题很简单：在PC设备上，当你将鼠标放在照片（公文包）上时，会出现一个黑色窗口（悬停效果），允许用户放大照片或输入照片细节（在出现的黑色窗口中，在半透明度效果中，有两个图标管理这两个选项）。 由于分辨率低于768px，悬停动作显然不起作用（它在移动设备上已经起作用），如果我点击照片，它会说无法加载内容。当我用移动设备点击照片时，会出现一个黑色窗口，显示两个图标，允许我缩放照片或输入细节。该机制由作者为管理效果而创建的自定义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');
    });
}

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

---

谢谢大家

我会尝试使用

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语句

注释掉或删除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');
});

//}