html - IOS 7 中的悬停链接中断

Question

我有一系列 div，其中嵌套了图像、链接和 span。这个问题似乎只发生在 IOS 7.0.4 (iPhone 5S) 上。这些元素上有一个悬停状态，在每个设备上都可以正常工作，除了这个链接根本不起作用的设备。非常感谢任何想法或建议。

HTML:

<div class="project">
  <img width="300" height="180" src="my-image.jpg" class="attachment-full" alt="Thumb">
  <a href="/misc/link">
   <span class="project-alt">
    <span class="project-title">My Title</span>
   </span>
  </a>
</div>

CSS:

.project {
 /*margin: 25px 25px 30px;*/
 margin: 20px 7px 30px;
 width: 300px; height: 180px;
 display: inline-block;
 position: relative;
 border: solid 1px #016e96;
 box-shadow: 0 0 15px 3px #9e9e9e;
 }

 #portfolio .project img {
 position: relative; 
 max-width: 300px; 
 max-height: 180px;
 width: 100%; 
 height: auto;
 }

 .project a {
  text-align: center;
  display: block; 
  height: 100%; 
  position: absolute; 
  width: 100%; 
  top: 0; 
  left: 0;
  }

  .project a:hover .project-alt {display: block;}

  .project-alt {
   background-color: rgba(0, 174, 239, 0.7);  
   margin: 25px 25px 30px; 
   width: 100%; 
   height: 100%; 
   display:none; 
   z-index: 5; 
   position: absolute; 
   left: -25px; 
   top: -25px; 
   vertical-align: middle;
   }

  .project-title {
   text-decoration: none; 
   font-size: 20px; 
   font-family: 'Titillium Web', sans-serif; 
   color: #ffffff; 
   font-style: italic; 
   font-weight: 700; 
   background-color: rgba(2,166,229, 0.8); 
   width: 230px; 
   display: inline-block; 
   vertical-align: middle; 
   line-height: 1.2em; 
   padding: 10px;
   }

因此，无论出于何种原因，在运行 IOS 7.0.4 的 iPhone 5S 上单击时，链接都不起作用。知道它如何处理 CSS :hover 状态吗？

Answer 1

在 IOS 上悬停显示的内容上不能有 display:none。使用不透明度或使用绝对定位隐藏它，并在悬停时将它放在它应该去的地方。也不要使用可见性。

完整解释如下:http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

另外，检查 z-index。

此处记录:https://developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7