タッチ対応デバイスのタッチでリンク上のホバーをアクティブにするにはどうすればよいですか？このようなHTMLで

Question

：

<a href="http://google.com" class="readmore">Read more</a> 

次に、このようなCSS：

a {color:white;} a:hover {background-color:#000;} 

どのように私は、タッチ対応デバイス上で1回のタップでホバーとリンク作業を許可することができますか？また、最初のタップでホバーを有効にし、次に2番目のタップでリンクをトリガーする方法はありますか？

Jsiddle Link

Answer 1

私はあなただけあなたのリンクのクリックを防ぐ唯一のダブルクリックにリダイレクトをトリガーする必要があると思います。

変更focusプロパティを使用して<a>のスタイル

$("a").click(function(e){ 
 
    e.preventDefault(); 
 
    return false; 
 
}) 
 

 
$("a").dblclick(function(){ 
 
    var location = $(this).attr("href"); 
 
    console.log("redirection to :",location); 
 
    window.location.href=location; 
 
})

a:focus{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="http://google.com">My link</a>

NB：リダイレクトがSOでブロックされているが、この例では、

に取り組んでいます