Css 简单悬停效果在mobile safari上不起作用

我试图在一个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; 

}

它适用于除mobile Safari之外的所有浏览器。我该怎么做才能让它工作？

---

提前感谢您的回答。

据我所知，悬停效果无法在移动设备上使用，因为系统无法看到悬停效果，正如您从计算机上了解到的那样。 你唯一能做的就是，将悬停效果设置为点击效果，只用于页面的响应性设计，因此用户必须点击图片并获取详细信息。

---

如果这不是解决方案，很抱歉

Mobile倾向于不使用悬停状态。您是否尝试过

：focus

？另外，你应该把转换/转换的非固定版本放在堆栈的最后。这是个好主意。如何将悬停效果替换为点击效果？在css中为移动设备编写一个额外的类，在css中告知，如果屏幕小于500px，例如，html中使用的规则小于500px。很抱歉，我不能帮你准备一个现成的代码，但目前我没有时间为你写下一个。尝试用谷歌搜索HTML中的响应设计，并寻找一些移动设备的CSS示例。。。代码基本上都是一样的，正如我在上面提到的，它们首先说明允许的最大视口大小，以及当用户界面适合CSS时，规则将处于活动状态