更改悬停交互以单击以触摸屏设备

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');
});

小提琴

如果您注释掉第一行然后取消注释第二行，则可以同时看到两种方式。