Залипания кнопок\ссылок с :hover эффектом на android?

Question

[Ammino]

Есть андроид, есть кнопка, как она задана - не важно, (то ли это button, толи это простая ссылка) с обычными стилями. ничего сложного

.btn-green {
text-align: center; 
display: inline-block; 
font-size: 16px; 
padding: 10px 15px; 
line-height: 1; 
text-decoration: none;
position: relative;
border: none; 
color: #fff;
border-bottom: 1px solid #000;
background: #7fce55;
}
.btn-green:hover, .btn-green:focus {background: #368b24;}

так вот при нажатии на кнопку происходит действие на странице, нет никакого перехода и перезагрузки страницы. Но на кнопке остается эффект :hover.

Суть вопроса: как вернуть кнопку в нормальное ее состояние после отжатия пальца пользователя от экрана android'а?

Answer 1

[phpus]

Убрать hover для всех мобильных. В css есть специальная функция. Поищи.
Или делай как я на уровне сервера =)

Answer 2

[rmaksim]

похоже что хотелось бы визуальное подтверждение что кликается какой-то элемент?
можно вместо .btn-green:hover, .btn-green:focus {}
написать .btn-green:active {}

а из сложного - это скриптами по тачстарт ставить класс по тачэнд убирать... оно вам так надо? )))

Comments

[Ammino]

это пробовала. от этого все кнопки залипают =)

[rmaksim]

странно, у меня нормалек, ну да ладно, может я что не та делал )

[rmaksim]

а какой все таки тэг юзается для кнопки?

[Ammino]

rmaksim: проблема была в том, что сайт таки адаптивный и если ставлю на всё :active, то на компах все кнопки становились "залипшими" и кое-где на андроиде (при возврате на предыдущую страницу, где была нажата кнопка) поэтому сделала так:
media only screen {
.btn-green:active {background: #368b24;}
}
и потом добавила tap-highlight-color чтобы на было всяких синих квадратов при тыке на кнопки
media only screen {
.btn-green {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.btn-green:active {background: #368b24;}
}

и получилось то, что и хотел клиент - Эффект нажатия на кнопку без js

Answer 3

[Ammino]

Нашлось решение.
Пришлось использовать media и вот такую плюшечкуtap-highlight-color: rgba(0, 0, 0, 0);

Comments

[phpus]

Умничка)