将悬停交互更改为点击触摸屏设备

Question

我在将鼠标悬停在页面上的另一个元素上时显示内容。在触摸屏上，这需要点击。

我知道 iOS 和 Android 将链接上的悬停操作转换为选项卡操作，但我认为我需要另一种方法，因为我的悬停区域跨越多个块元素，而不仅仅是一个链接。

这就是我所拥有的：

<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 来添加点击功能，但这是我卡住的地方，因为至少可以说我的 Javascript 知识很差。

:焦点？

我不太清楚 :focus 是否适用于我在触摸屏上的场景。只需添加这个伪类就可以解决问题吗？

非常感谢您在这里提供的任何帮助。 （顺便说一句，如果这与任何答案相关，也使用 jQuery）

Answer 1

好的，您将需要在执行任何操作之前定义您的事件（您可以基于 no-touch 类执行此操作）。从那里，我只是选择切换一个类，它仍然允许你的 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');
});

Fiddle

如果你注释掉第一行然后取消注释第二行，你可以看到这两种方式。