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

86

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

В настоящее время на моей странице есть 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;
}
Дэнни Мальчик
источник
есть плагин jquery под названием hoverIntent
Пит

Ответы:

92

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

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

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

ЛОТОСЫ
источник
26
w3schools - не лучший ресурс, поэтому я бы предпочел процитировать developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive
23tux,
3
Это НЕ работает в Microsoft Edge на ноутбуке с ОС Windows 10 с сенсорным экраном.
SepehrM
10
Эмммм ... прости? Смешно. Да, край Microsoft еще не вышел, когда я опубликовал это ... Я думаю
LOTUSMS
2
Похоже, это не работает с мобильным сафари. Ответ ниже с onclick = "" делает свое дело!
Джейсон Годсон
4
Все это очень хорошо, пока пользователь снова не нажмет кнопку, чтобы закрыть ее, и она не закроется, пока пользователь не коснется где-нибудь за пределами кнопки. Попробуйте адаптивный вид инструментов разработчика Chrome, где у вас есть симулятор касания. Если бы это можно было как-то сделать на чистом CSS, чтобы закрыть его еще одним нажатием на кнопку, это было бы здорово!
lowtechsun
17

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

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

Бездумный Рейнджер
источник
это сработало для меня. LOTUSMS не ответил - не знаю почему. возможно, будущий посетитель этой страницы сможет просветить
danyamachine
Он работает на сафари с onclick="", но как тогда отключить элемент? Он остается активным навсегда после первого прикосновения, даже при прикосновении снаружи.
гигабайт
4
Обновление 2019: onclick = "" устарело
Грегдебрик
6

У меня такая же проблема на мобильном устройстве с браузером 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%;
    }
Steve_Angel
источник
6
document.addEventListener("touchstart", function() {}, true);

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

независимый
источник
Думаю, это заслуживает дополнительных объяснений.
Romain Vincent
Хороший прием, но нужно быть осторожным: это может нарушить другие конкретные взаимодействия.
skabbit
3

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

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

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

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

user6679588
источник
2
Вы немного обобщаете это - особенно старые iPhone не работают hoverпо щелчку (но они применяются activeи focus). Насколько мне известно, это также не зависит от «кликабельности» объекта, так как каждый элемент «кликабелен» - но я могу ошибаться, так как не видел все устройства, поэтому это хорошая практика. не просто наблюдением, но и документацией.
TheThirdMan
2

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

Райан Уокер
источник
2

Я думаю, что этот простой метод может достичь этой цели. С помощью 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
});

Сыпь
источник
0

Единственное решение 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>

mxxn
источник
-1

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

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

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

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

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

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

Пратик Гупта
источник
Этот ответ не объясняет, как добавить функцию щелчка.
Moberg