как прекратить зависание на iphone - PullRequest
Новая
       8

как прекратить зависание на iphone

0 голосов
/ 08 апреля 2020

У меня есть список товаров с иконками для содержания. При наведении курсора на значок текст объясняет значение изображения.

Поскольку на сенсорных экранах указатель мыши не существует, я также использую: active.

Мое решение отлично работает - на рабочем столе (при наведении курсора на текст, перемещении мыши в сторону: текст исчезает) - и на обычные телефоны (касание показывает текст, касание куда-то еще: текст исчезает

, но не на iPhone: касание показывает текст, но оно остается даже при касании в другом месте (за исключением касания другого «перемещаемого» изображения)

HTML: 

<span class="canhover">
    <img class="icon24" src="img/allergens/gluten.jpg">
    <span class="hovertxt">
        contains gluten
    </span>
</span>

<span class="canhover">
    <img class="icon24" src="img/allergens/milk.jpg">
    <span class="hovertxt">
        conains milk
    </span>
</span>
...

CSS: 

.canhover {
    position: relative;
}
.canhover:hover .hovertxt, .canhover:active .hovertxt {
    display: block;
}
.hovertxt {
    display: none;
    position: absolute; bottom: 2em; left: 0;
}

Как добиться того, чтобы текст на телефонах также исчезал при подключении к чему-либо еще?

1 Ответ

0 голосов
/ 08 апреля 2020

Попробуйте добавить :focus с :hover & :active следующим образом: 

.canhover:hover .hovertxt,
.canhover:focus .hovertxt,
.canhover:active .hovertxt{
    display: block;
}

и в браузере Safari используйте safari prefix

...