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

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

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

1 个答案: