Змінення: наведіть курсор, щоб доторкнутися / клацнути для мобільних пристроїв

Я оглянувся навколо, але не можу повністю знайти те, що шукаю.

Наразі на моїй сторінці є анімація 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;
}

Якщо ви використовуєте: активний селектор у поєднанні з: hover, ви можете досягти цього відповідно до w3schools , якщо після селектора: hover викликається: активний селектор.

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

Вам доведеться протестувати FIDDLE у мобільному середовищі. На даний момент я не можу.
виправлення - я щойно тестував у мобільному телефоні, він працює нормально

Ви можете додати onclick=""до наведеного елемента. Наведення курсору спрацює після цього.

Змінити: Але ви дійсно не повинні додавати нічого стилю, пов’язаного з вашою розміткою, просто опублікували це як альтернативу.

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

Ну, я погоджуюсь із наведеними вище відповідями, але все ж може бути інший спосіб зробити це, і це за допомогою media запитів.

Припустимо, це те, що ви хочете зробити:

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

тоді ви можете зробити це за допомогою медіа-запиту як:

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

А для більш докладної інформації ви можете відвідати цю сторінку.

Рішення лише для 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>