css - 简单的悬停效果不适用于移动 safari

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

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