CSS: focus Не работает в iOS

У меня есть коробка с изображением в ней. При наведении/фокусировке я хочу, чтобы надпись на цвет и надпись исчезли над ней. Он отлично работает практически в каждом браузере и устройстве, за исключением устройств iOS.CSS: focus Не работает в 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

Возможный дубликат [: активный псевдокласс не работает в мобильном сафари] (http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) –

Решение в post Sergey Denisov shared работало. Вы просто добавляете ontouchstart="" к только элемент тела, и он волшебным образом работает, как так:

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

Вот оно! Не могу сказать, как и почему это работает, но это так.

источник

2015-06-02 00:11:31

Этот трюк, похоже, больше не работает в Safari и Chrome на iOS 10. – kba

CSS: focus Не работает в iOS

ответ

Смежные вопросы