Добавление эффекта: hover в Mobile Safari, когда пользователь «нажимает»

Question

Можно ли вызвать событие :hover всякий раз, когда пользователь Mobile Safari нажимает на область div?

Это не обязательно должна быть ссылка.На самом деле, это не может быть ссылка, потому что пользователь перейдет на другую веб-страницу.

Эффект наведения, который я применил, на самом деле на div: #div:hover {color:#ccc;} Я бы хотел, чтобы это наведение происходило всякий раз, когда iPadили пользователь iPhone одним нажатием на область div.

Я знаю, что фрагмент CSS существует для цвета фона ссылки: -webkit-tap-highlight-color:rgba(200,0,0,0.4); Но это не относится к моей ситуации.

Если это относится, например, к цвету текста, я мог бы использовать его.

Обновление: Пожалуйста, ознакомьтесь с моим принятым ответом ниже

Answer 1

Вы говорите об этом в контексте с UIWebview?Вы можете внедрить CSS или Javascript и рассматривать его как любой другой браузер.Если вы делаете это, я бы предложил jQuery

Если вы не используете UIWebView, тогда нам нужно определить распознаватели жестов на UIView и обработать жесты.т.е. в жесте обработчики делают наведение парения и удаляют его при исчезновении пользовательского нажатия ...

Answer 2

Я понял, как запускать: hover, когда пользователь нажимает на область div без использования JavaScript.Это делается с использованием display:none; и display:block;.

Например:

<div class="block">
    <p>This content is shown *before* the user hovers over .block or taps .block on an iOS device.</p>
    <div class="mask">
        <p>This content is shown *after* the user hovers over .block or taps .block on an iOS device.</p>
    </div>
</div>

CSS:

.block {
    width:300px;
    height:300px;
    background:black;
}

.mask {
    width:300px;
    height:300px;
    background-color:gray;
    display:none;
}

.block:hover .mask {
    display:block;
}

Я обнаружил, что: hover срабатывает только на iOS при использовании display (в отличие от opacity).Кроме того, CSS-переходы игнорируют display, поэтому это нельзя сделать с помощью CSS.Если вам нужен переход для пользователей настольных компьютеров, вы можете добавить opacity:0; и opacity:1;

РЕДАКТИРОВАТЬ: CSS visibility также, кажется, работает.

Спасибо за время.