CODEWITHSUNDEEP
htmlioscsshover
Dylan Hildenbrand
Dylan Hildenbrand

Reputation: 449

Links breaking on hover in IOS 7

I have a series of divs with images, links, and spans nested within them. The problem only seems to happen on IOS 7.0.4 (iPhone 5S). There is a hover state on these elements that works fine on every device EXCEPT for this one where the links simply don't work. Any ideas or suggestions are much appreciated.

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;
   }

So for whatever reason, the links don't work when clicked on an iPhone 5S running IOS 7.0.4. Any ideas how it handles the CSS :hover state?

Upvotes: 2

Views: 855

Answers (1)

Christina
Christina

Reputation: 34652

You can't have a display:none on something that is revealed by hover on IOS. Use opacity or hide it with absolute positioned and on hover put it where it's supposed to go. Don't use visibility either.

Here's the full explanation: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

Also, check the z-index.

This is documented here: https://developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7

Upvotes: 1

Related Questions