Safari iphone/ipad "mouse hover" sul nuovo collegamento dopo quello precedente viene sostituito con javascript

Question

Dopo aver fatto clic su un collegamento su iphone o ipad, lascia un passaggio del mouse simulato che attiva lo stile a:hover css su quel collegamento. Se il link ha un gestore javascript che ti mantiene sulla stessa pagina, lo stato del passaggio del mouse non cambierà fino a quando non fai clic su un altro link.

Questo diventa strano se si dispone di un widget Ajax che fa domande e ogni risposta è un collegamento. Quando tocchi una delle risposte, si evidenzia con lo stato di passaggio del mouse, e poi quando la domanda e le risposte vengono sostituite (usando javascript) da una nuova domanda e risposta, la nuova risposta che appare nella stessa posizione della risposta precedente ha il suo lo stato di hover viene attivato automaticamente. Voglio evitare che ciò accada al nuovo link di risposta.

C'è qualche modo (forse qualcosa in javascript) che può darmi lo stesso risultato del "passaggio del mouse" non è più al di sopra di questo elemento?

Note:

• So che potrei semplicemente avere a:hover usare lo stesso stile css come a, ma a:active styling è difficilmente visibile poiché lo stato attivo di un tocco click è così breve, quindi spero per qualcosa che può mostrare lo stato di hover su un collegamento fino a quando lo sostituisco con nuovo codice HTML
• Ho provato una varietà di approcci in javascript, come chiamare "blur()" sull'elemento dom e altre cose, ma senza fortuna -Sto cominciando a pensare che la soluzione migliore sia quella di applicare classi ai collegamenti su eventi javascript per gestire da solo lo stato hover (o Ust lasciare così com'è)

Answer 1

Il problema è che quando si sostituisce il contenuto al suo posto, Safari Mobile considera i nuovi elementi come se erano quelli vecchi, perché occupano la stessa posizione nel DOM. Una soluzione alternativa è rimuovere prima i vecchi elementi, quindi aggiungere i nuovi elementi in modo asincrono. Il modo più semplice per farlo è usare setTimeout().

http://jsfiddle.net/chad/JNZvu/10/

// When we click on an answer 
$('body').on('click', '.answer', function(){ 
    // don't follow it's link 
    event.preventDefault(); 
    // fade out the container 
    $('.container').fadeOut(function(){ 
    // remove old elements (happens after fadeOut because we are in the callback) 
    $('.container').html(''); 
    // add new elements asynchronously and fade container back in. 
    setTimeout('$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0); 
    }); 
}); 

Nel fare questo per reale, la fadeOut sarebbe stato chiamato al tempo stesso come la funzione AJAX, e quindi la rimozione/aggiunta sarebbe accaduto nel callback AJAX.

Answer 2

Si può provare a scrivere un altro: regola hover che si attiva quando il genitore ha una classe particolare di fatto negando la regola hover esistente. La classe sul genitore dovrebbe essere aggiunta su touchend e rimossa su touchstart, in modo che la regola predefinita possa avere effetto sul collegamento successivo cliccato o toccato.

Ho appena risolto un problema simile in cui desidero lo stilo hover per le voci di elenco, ma poiché il genitore può scorrere con un dito utilizzando iscroll, ho bisogno di annullare quell'effetto hover non appena si sposta la lista di scorrimento. E 'utilizzando jQuery, ma si ottiene l'idea:

$('ul.scroll').bind('touchmove', function(e) { 
    $(this).addClass('moving'); 
}); 
$('ul.scroll').bind('touchstart', function(e) { 
    $(this).removeClass('moving'); 
}); 

qui sono le mie regole di stile:

ul.scroll li:hover { 
    background-color: #D1E8DA; 
} 
ul.scroll.moving li:hover { 
    background-color: #EFEFEF; 
}