针对触摸屏设备更改悬停互动点击 [英] Change hover interaction to click for touch screen devices

问题描述

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

I have content revealing on hovering over another element on the page. On a touch screen this needs to be a click.

我知道iOS和Android将悬停动作转换为标签操作的链接，但我想我需要另一种方法，因为我的悬停区域跨越多个块元素，

I know that iOS and Android translate hover action on a link to a tabbing action, but I think I need another approach as my hover area spans more than one block element, not just a link.

这是我得到的：

<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 ，因此将无触摸类添加到HTML标记中。一旦内容在标签之后出现，如果页面上有其他任何内容被选中，则应该再次隐藏（访问者不需要以任何其他方式关闭它）。

I'm using Modernizr, so the 'no-touch' class gets added to the HTML tag. Once the content has appeared after being tabbed, it should be hidden again if anything else on the page is tabbed (visitors don't need to be able to close it any other way).

我想我需要一些JS添加点击功能，如果设备是触摸启用，但这是我遇到的困难，因为我的Javascript知识不好说最少。

I guess I would need some JS to add the click functionality if the device is touch enabled, but this is where I'm getting stuck, as my Javascript knowledge is poor to say the least.

是否：focus将适用于我的触摸屏场景。只是添加这个伪类做的伎俩？

It's not quite clear to me whether :focus would work for my scenario on touch screens. Would simply adding this pseudo class do the trick?

非常感谢在这里的任何帮助。 （Btw，也使用jQuery，如果这与任何答案相关）

Many thanks for any help here. (Btw, also using jQuery if this is relevant to any answers)

推荐答案

好吧，你要定义你的事件（你可以根据无接触类做）在你做任何事情之前。从那里，我只是选择切换一个类，这将仍然允许您的CSS转换。

Okay, you're going to want to define your event (you can do it based on the no-touch class) before you do anything. From there, I just opted to toggle a class, which will still allow for your CSS transitions.

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

小提琴

如果您注释掉第一行然后取消注释第二行，您可以看到它。

You can see it both ways if you comment out the first line then uncomment the second.

这篇关于针对触摸屏设备更改悬停互动点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！