在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

嗯，我猜你正在使用的瀏覽器無法處理網站，一些移動瀏覽器不像現在的桌面瀏覽器那樣先進;）