CSS：焦點不能在iOS中工作

我有一個包含圖像的框。在懸停/焦點上，我想要一個顏色疊加層和標題淡入其中。除了iOS設備外，它幾乎適用於所有瀏覽器和設備。CSS：焦點不能在iOS中工作

我正在使用：hover和：focus僞類來適應各種設備，但它似乎沒有幫助iOS。鼠標懸停時沒有任何反應。

這是我的代碼，我也有一個全功能fiddle。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.my_image { 
 
    float: left; 
 
    width: 50%; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 
.my_image p { 
 
    position: absolute; 
 
    color: #fff; 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
    opacity: 0; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    /* IE 9 */ 
 
    -webkit-transform: translate(-50%, -50%); 
 
    /* Safari and Chrome */ 
 
    -webkit-transition: opacity .25s ease; 
 
    -moz-transition: opacity .25s ease; 
 
} 
 
.overlay { 
 
    top: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(121, 87, 164, .80); 
 
    text-align: center; 
 
    opacity: 0; 
 
    -webkit-transition: opacity .25s ease; 
 
    -moz-transition: opacity .25s ease; 
 
} 
 
.my_image:hover .overlay, 
 
.my_image:hover p, 
 
.my_image:focus .overlay, 
 
.my_image:focus p { 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="my_image"> 
 
    <img src="https://unsplash.imgix.net/photo-1428976365951-b70e0fa5c551?fit=crop&fm=jpg&h=225&q=75&w=350" /> 
 
    <div class="overlay"></div> 
 
    <p>Overlay Caption</p> 
 
</div>

有一些辦法可以讓沒有JS這項工作？我在頁面上使用jQuery，所以我不完全反對，我只是不認爲這是必要的。

來源

2015-06-01 Brian Johnson

可能重複的[：活動僞類不能在移動Safari瀏覽器中工作]（http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari） –

post Sergey Denisov shared中的解決方案起作用。您只需添加ontouchstart=""只是body元素，它神奇的作品，像這樣：

<body ontouchstart=""> 
... 
</body>

這就是它！無法告訴你這是如何或爲什麼會起作用，但它確實如此。

來源

2015-06-02 00:11:31

這個技巧在iOS 10上的Safari和Chrome中似乎不再適用。 – kba

CSS：焦點不能在iOS中工作

回答

相關問題