Изменение: наведите указатель мыши на сенсорные кнопки для мобильных устройств

Я посмотрел вокруг, но не могу найти то, что я ищу.

В настоящее время на моей странице есть анимация css, которая запускается с помощью: hover. Я бы хотел, чтобы это изменилось на 'click' или "touch", когда страница была изменена на ширину 700 пикселей при использовании медиа-запросов.

Вот что у меня есть на данный момент: http://jsfiddle.net/danieljoseph/3p6Kz/

Как вы можете видеть, зависание не будет работать на мобильных устройствах, но я все же хочу, чтобы он работал одинаково, просто щелкнув, а не зависав.

Я предпочел бы использовать css, если возможно, но доволен JQuery.

У меня такое чувство, что это очень легко сделать, но я просто пропущу что-то очень очевидное! Любая помощь будет оценена.

Вот анимация css:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

Ответ 1

Если вы используете: активный селектор в сочетании с: hover, вы можете достичь этого в соответствии с w3schools, пока активный переключатель активируется после: селектора hover.

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

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

Ответ 2

Вы можете добавить onclick="" к зависающему элементу. После этого Hover будет работать.

Изменить: Но вы действительно не должны добавлять какой-либо стиль, связанный с вашей разметкой, просто разместили его в качестве альтернативы.

Ответ 3

У меня такая же проблема, в мобильном устройстве с браузером Microsoft Edge. Я могу решить проблему с помощью aria-haspopup="true". Для других мобильных браузеров необходимо добавить в div и :hover, :active, :focus.

Пример html:

<div class="left_bar" aria-haspopup="true">

CSS

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

Ответ 4

Я ноу-хау CSS, но я заметил, что зависание будет работать на сенсорных экранах, пока это "зависающий" элемент: изображение, ссылка, кнопка. Вы можете сделать все это с помощью CSS, используя следующий трюк.

Измените свой фон div на фактический тег изображения внутри div или создайте фиктивную ссылку вокруг всего div, затем он будет регистрироваться как зависающий, когда вы коснетесь изображения.

Выполнение этого будет означать, что вам нужно, чтобы остальная часть вашей страницы также была "зависающей", поэтому, когда вы касаетесь внешней части изображения, она распознает, что информация-слайд: зависание закончилось. Мой трюк заключается в том, чтобы сделать все мои другие фиктивные ссылки для контента.

Это не очень элегантный, но он работает.

Ответ 5

На большинстве устройств работают другие ответы. Для того, чтобы убедиться, что это работает на каждом устройстве (в реакции), мне нужно было обернуть его в тег привязки <a> и добавить следующее :hover :focus :active (в таком порядке), а также role="button" и tabIndex="0".

Ответ 6

document.addEventListener("touchstart", function() {}, true);

Этот фрагмент включит эффекты наведения для сенсорных экранов