Как я могу имитировать Ховер с оттенком в Контакте браузере?

все, что вам нужно сделать, это привязать touchstart на родителя. Что-то вроде этого будет работать:

$('body').on('touchstart', function() {});

вам не нужно ничего делать в функции, оставьте его пустым. Этого будет достаточно, чтобы получить зависания на ощупь, поэтому прикосновение ведет себя более похоже :hover и менее похоже :active. магия iOS.

попробуйте это:

<script>
document.addEventListener("touchstart", function(){}, true);
</script>

и в вашем CSS:

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none /*only to disable context menu on long press*/
}

С этим кодом вам не нужен дополнительный .наведите класс!

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

просто разрешить "щелчок" элемент (нажав на экран), а затем вызвать hover событие с использованием JavaScript.

var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
 // Trigger the `hover` event on the paragraph
 p.onhover.call(p);
};

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

обновление: Я только что протестировал эту технику на моем iPhone и он кажется, работает нормально. Попробуйте здесь:http://jsfiddle.net/mathias/YS7ft/show/light/

Если вы хотите использовать долгое нажатие на курок, вместо того чтобы парить, вы можете использовать приведенный выше фрагмент кода в качестве отправной точки и весело провести время с таймеры и прочее ;)

Дальнейшее Улучшение Решения

сначала я пошел с подход Рича Брэдшоу, но потом начали появляться проблемы. Делая e. preventDefault () on 'touchstart' событие, страница больше не прокручивается, и ни длительное нажатие не может запустить меню опций, ни двойной щелчок zoom не может завершить выполнение.

решение может быть выяснить, какое событие вызывается и просто e. preventDefault () в поздней, 'touchend'. Так как свиток 'touchmove' перед 'touchend' он остается по умолчанию, и 'click' также предотвращается, так как он приходит послесловия в цепочке событий, применяемых к мобильному телефону, например:

// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {

    // If event is 'touchend' then...
    if (e.type == 'touchend') {
        // Ensuring we event prevent default in all major browsers
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }

    // Add class responsible for :hover effect
    $(this).toggleClass('hover_effect');
});

но затем, когда появляется меню опций, он больше не срабатывает 'touchend' отвечает за выключение класса, и в следующий раз поведение при наведении будет наоборот, все перепуталось.

решение тогда было бы, опять же, условно выяснить, в каком событии мы находимся, или просто делать отдельные, и использовать addClass () и removeClass() соответственно на 'touchstart' и 'touchend', гарантируя, что он всегда начинается и заканчивается соответственно добавлением и удалением вместо условного принятия решения об этом. Чтобы закончить, мы также свяжем удаление обратного вызова с 'focusout' тип события, оставаясь ответственным за очистку любого класса наведения ссылки, который может остаться и никогда не возвращаться снова, например:

$('.static_parent').on('touchstart', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('touchend focusout', '.link', function (e) {
    // Think double click zoom still fails here
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    $(this).removeClass('hover_effect');
});

внимание: некоторые ошибки все еще происходят в двух предыдущих решениях, а также думают (не протестированы), двойной щелчок zoom все еще не удается.

аккуратный и, надеюсь, ошибка бесплатно (не :)) Javascript решение

теперь, на секунду, чище, аккуратнее и отзывчивый, подход просто использование javascript (без смешивания .hover class и псевдо: hover) и откуда вы можете напрямую вызвать свое поведение ajax на универсальном (мобильном и настольном) 'click' событие, я нашел довольно хорошо ответил на вопрос из которого я наконец понял, как я мог смешивать события касания и мыши вместе без нескольких обратных вызовов событий, неизбежно меняющих друг друга по цепочке событий. Вот как:

$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
    $(this).removeClass('hover_effect');

    // As it's the chain's last event we only prevent it from making HTTP request
    if (e.type == 'click') {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        // Ajax behavior here!
    }
});

мышь hover эффект не может быть реализован в сенсорном устройстве . Когда я появился с такой же ситуацией в safariios Я :active в CSS, чтобы сделать эффект.

ie.

p:active {
  color:red;
}

в моем случае это работает .Может быть, это также тот случай, который может быть использован без использования javascript. Просто дай попробовать.

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

// Activate only in devices with touch screen
if('ontouchstart' in window)
{
    // this will make touch event add hover pseudoclass
    document.addEventListener('touchstart', function(e) {}, true);

    // modify click event
    document.addEventListener('click', function(e) {
        // get .tapHover element under cursor
        var el = jQuery(e.target).hasClass('tapHover')
            ? jQuery(e.target)
            : jQuery(e.target).closest('.tapHover');

        if(!el.length)
            return;

        // remove tapped class from old ones
        jQuery('.tapHover.tapped').each(function() {
            if(this != el.get(0))
                jQuery(this).removeClass('tapped');
        });

        if(!el.hasClass('tapped'))
        {
            // this is the first tap
            el.addClass('tapped');
            e.preventDefault();
            return false;
        }
        else
        {
            // second tap
            return true;
        }
    }, true);
}

.box {
	float:		left;
	
	display:	inline-block;
	margin:		50px 0 0 50px;
	width:		100px;
	height:		100px;
	overflow:	hidden;
	
	font-size:	20px;
	
	border:		solid 1px black;
}
.box.tapHover {
	background:	yellow;
}
.box.tapped {
	border:		solid 3px red;
}
.box:hover {
	background:	red;
}

<div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>

без устройства (или, скорее, браузера) конкретного JS я уверен, что вам не повезло.

Edit: думал, что вы хотели избежать этого, пока я не перечитал ваш вопрос. В случае Mobile Safari вы можете зарегистрироваться, чтобы получить все события касания, подобные тому, что вы можете сделать с native UIView-s. Не могу найти документацию прямо сейчас, хотя попытаюсь.

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

Это то, что Apple скажет о сенсорный обращение В общем, раз уж вы упомянули iPhone.

мой личный вкус заключается в том, чтобы приписать :hover стили :focus состояние также, как:

p {
    color: red;
}

p:hover, p:focus {
    color: blue;
}

затем со следующим HTML-кодом:

<p id="some-p-tag" tabindex="-1">WOOOO</p>

и следующий JavaScript:

$("#some-p-tag").on("touchstart", function(e){
    e.preventDefault();
    var $elem = $(this);

    if($elem.is(":focus")) {
        //this can be registered as a "click" on a mobile device, as it's a double tap
        $elem.blur()
    }
    else {
        $elem.focus();
    }
});

сочетание собственного 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' );
     });
   }

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

использование можно использовать 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;}

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