Question

我有一系列div，其中嵌有图像，链接和跨度。这个问题似乎只发生在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：悬停状态？

Answer 1

你不能在IOS上悬停显示的内容上显示：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

在IOS 7中悬停的链接断开

1 个答案: