简单的悬停效果不适用于移动野生动物园

Question

我正在尝试对html网站中的一些图像进行简单的悬停效果。计划是：当您将鼠标悬停在图像上时，图像会着色并显示一些细节。css 代码是这样的。

   /* Hover overs */ 
.folio4:hover .face { 
    opacity:1;
   cursor: pointer; 
}                                                                           
.folio4:hover img {
   opacity: 1; 
}
.folio4:hover h2 {
    opacity: 1;
}
.folio4:hover a.icon {
    opacity:1;
    transform: translateY(75px); 
    -webkit-transform: translateY(75px);
    -o-transform: translateY(75px);
    -ms-transform: translateY(75px);
    transition: 500ms;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    -ms-transition: 500ms;
}
.folio4:hover a.icon2 { 
    transition: 500ms;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    -ms-transition: 500ms;
    transform: translateY(75px); 
    -webkit-transform: translateY(75px);
    -o-transform: translateY(75px);
    -ms-transform: translateY(75px);
    opacity: 1; 
}

它适用于除移动Safari以外的所有浏览器。我能做些什么来让它工作？提前感谢您的每一个答案。

Answer 1

据我所知，悬停效果不适用于移动设备，因为系统看不到悬停效果，正如您从计算机上知道的那样。您唯一能做的就是将该悬停效果设置为仅针对页面响应式设计的点击效果，因此用户必须点击图片并获取详细信息。抱歉，如果这不是解决方案