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

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

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

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

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

Я бы предпочел использовать 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;
}

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

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

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

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

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

У меня такая же проблема на мобильном устройстве с браузером 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%;
    }

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

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

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

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

Это будет означать, что вам нужно, чтобы остальная часть вашей страницы также была «зависающей», чтобы при касании за пределами изображения он распознал, что info-slide: hover закончился. Моя уловка состоит в том, чтобы сделать все остальные ссылки на мой контент фиктивными.

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

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

Я думаю, что этот простой метод может достичь этой цели. С помощью CSS вы можете отключить событие указателя на «none», а затем использовать jQuery для переключения классов.

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

Используйте jQuery для переключения классов:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

Единственное решение CSS для тех, у кого проблемы со стилем кнопок мобильного сенсорного экрана.

Это исправит ваши проблемы с джойстиком / активной кнопкой.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

Что ж, я согласен с приведенными выше ответами, но все же может быть другой способ сделать это - с помощью mediaзапросов.

Предположим, это то, что вы хотите сделать:

body.nontouch nav a:hover {
    background: yellow;
}

то вы можете сделать это с помощью медиа-запроса как:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

А для более подробной информации вы можете посетить эту страницу.