更改懸停交互以單擊以觸摸屏設備

Question

我將鼠標懸停在頁面上的另一個元素上時會感到滿意。 在觸摸屏上，這需要單擊一下。

我知道iOS和Android將鏈接上的懸停操作轉換為Tab鍵操作，但是我想我需要另一種方法，因為我的懸停區域跨越多個塊元素，而不僅僅是一個鏈接。

這就是我得到的：

<div>
<h3>Headline</h3>
<div>
<p><img src="http://placehold.it/300x200&text=image" /></p>
<p>I tillegg til sprellende fersk sjømat og sunne ferdigretter, kan vi tilby helnorske produkter fra spennede småprodusenter. <a href="pagename.html">Les mer &gt;></a></p>
</div></div>

和

div {width:300px; position:relative;}
p {padding-top:10px; margin:0;}
p+p {background:#fff;
display:block; height:100%; width:95%;
position:absolute; left:0; top:0;
opacity:0; transition:.3s ease-in-out opacity;
margin:0; padding:2% 5% 0 0;}

div:hover p+p {opacity:1;}

在這里起作用 ： http : //jsfiddle.net/ju6bX/45/

我正在使用Modernizr ，因此將“ no-touch”類添加到HTML標記中。 一旦在選項卡上顯示了內容，就應該再次隱藏該內容（如果頁面上的其他選項卡也已被隱藏）（訪問者不需要能夠以其他任何方式關閉它）。

JavaScript的？

我想如果設備啟用了觸摸功能，我將需要一些JS來添加單擊功能，但這就是我遇到的問題，因為至少我的Java知識不足。

：焦點？

我尚不清楚：focus是否適用於我在觸摸屏上的場景。 只需添加此偽類即可解決問題？

非常感謝您的幫助。 （順便說一句，如果這與任何答案相關，也使用jQuery）

Answer 1

好的，您將需要在執行任何操作之前定義您的事件（您可以基於非接觸式課程來定義它）。 從那里，我只是選擇切換一個類，該類仍將允許您進行CSS轉換。

$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
//!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';

$('div div').on(event, function() {
    $(this).find('p + p').toggleClass('open');
});

小提琴

如果您注釋掉第一行然后取消注釋第二行，則可以同時看到兩種方式。