在iPad上点按/悬停有时候不起作用

Question

我试图对图像进行简单的悬停效果。它在桌面上运行良好，但在iPad上有问题。当我尝试点击右侧图像时，此图像的右侧不会影响点击，叠加层不显示。但左侧图像和右侧图像的左侧显示重叠在点击罚款。也许有人可以解释这种奇怪的行为？

HTML：

<div class="col-sm-6 team-wrap"> 
    <div class="team-member text-center"> 
    <div class="team-img"> 
     <img src="" alt=""> 
     <div class="overlay"></div> 
    </div> 
    <h4 class="team-title">David Geller</h4> 
    <span>CEO of Company</span> 
    </div> 
</div> 
<div class="col-sm-6 team-wrap"> 
    <div class="team-member text-center"> 
    <div class="team-img"> 
     <img src="" alt=""> 
     <div class="overlay"></div> 
    </div> 
    <h4 class="team-title">David Geller</h4> 
    <span>CEO of Company</span> 
    </div> 
</div> 

的CSS：

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.col-sm-6 { 
    width: 50%; 
    float: left; 
    position: relative; 
    min-height: 1px; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

.team-img img { 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    overflow: hidden; 
    width: 100%; 
} 

.team-member, 
.team-img { 
    position: relative; 
    overflow: hidden; 
} 

.team-title { 
    margin: 34px 0 8px; 
} 

.overlay { 
    background-color: rgba(20,20,20,.7); 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    overflow: hidden; 
} 

.team-img:hover .overlay { 
    opacity: 1; 
} 

Codepen链接：

http://codepen.io/anon/pen/ZQOKGG

Answer 1

嗯，我猜你正在使用的浏览器无法处理网站，一些移动浏览器不像现在的桌面浏览器那样先进;）