Как имитировать зависание с помощью сенсорных браузеров? - PullRequest
Новая
       91

Как имитировать зависание с помощью сенсорных браузеров?

117 голосов
/ 17 мая 2010

С некоторыми HTML, как это: 

<p>Some Text</p>

Тогда немного CSS вроде этого: 

p {
  color:black;
}

p:hover {
  color:red;
}

Как разрешить длительное касание на сенсорном устройстве для репликации наведения? Я могу изменить разметку / использовать JS и т. Д., Но не могу придумать простой способ сделать это.

Ответы [ 14 ]

0 голосов
/ 11 января 2019

Решено 2019 - наведите курсор на сенсорный экран

Теперь кажется, что лучше вообще избегать использования hover с ios или touch. Приведенный ниже код применяет ваш CSS, пока поддерживается касание, и без других всплывающих окон ios. Сделай это;

  1. Jquery add: $ ("p"). On ("touchstart", function (e) {$ (this) .focus (); e.preventDefault ();});

  2. CSS: замените p: hover на p: focus и добавьте p: active

Опция;

  • заменить селектор jquery p на любой класс и т. Д.

  • , чтобы сохранить эффект, также сохраните p: hover и добавьте body {cursor: ponter;}, чтобы касание в любом месте заканчивало его

  • попробуйте события нажатия и наведения мыши, а также запуск прикосновения в том же коде (но не тестировали)

  • удалить e.preventDefault (); чтобы пользователи могли использовать всплывающие окна ios, например, копировать

Примечания

  • проверено только для текстовых элементов, ios может обрабатывать ввод и т. Д. По-разному

  • протестировано только на iphone XR ios 12.1.12 и ipad 3 ios 9.3.5 с использованием Safari или Chrome.

0 голосов
/ 10 января 2015

Использование может также использовать CSS, добавить фокус и активный (для IE7 и ниже) к скрытой ссылке Пример меню ul внутри div с меню класса: 

.menu ul ul {display:none; position:absolute; left:100%; top:0; padding:0;}
.menu ul ul ul {display:none; position:absolute; top:0; left:100%;}
.menu ul ul a, .menu ul ul a:focus, .menu ul ul a:active { width:170px; padding:4px 4%; background:#e77776; color:#fff; margin-left:-15px; }
.menu ul li:hover > ul { display:block; }
.menu ul li ul li {margin:0;}

Уже поздно и не проверено, должно сработать; -)

0 голосов
/ 03 июня 2014

Самое простое решение, которое я нашел: у меня было несколько тегов с правилами: hover css. Я переключился на и вуаля. Стили наведения в iOS начали работать.

0 голосов
/ 17 ноября 2013

Сочетание нативного Javascript и jQuery: 

var gFireEvent = function (oElem,sEvent) 
{
 try {
 if( typeof sEvent == 'string' && o.isDOM( oElem ))
 {
  var b = !!(document.createEvent),
     evt = b?document.createEvent("HTMLEvents"):document.createEventObject();
  if( b )    
  {  evt.initEvent(sEvent, true, true ); 
    return !oElem.dispatchEvent(evt);
  }
  return oElem.fireEvent('on'+sEvent,evt);
 }
 } catch(e) {}
 return false;
};


// Next you can do is (bIsMob etc you have to determine yourself):

   if( <<< bIsMob || bIsTab || bisTouch >>> )
   {
     $(document).on('mousedown', function(e)
     {
       gFireEvent(e.target,'mouseover' );
     }).on('mouseup', function(e)
     {
       gFireEvent(e.target,'mouseout' );
     });
   }
Страница:
...