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

时间:2013-10-01 13:59:39

标签: javascript css css3 hover touch

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

我知道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 ,因此“禁止触摸”类会添加到HTML标记中。一旦内容在标签后出现,如果页面上的任何其他内容被标记,则应该再次隐藏它(访问者不需要以任何其他方式关闭它)。

的Javascript?

我想如果设备启用了触摸功能,我需要一些JS添加点击功能,但这就是我遇到困难的地方,因为我的Javascript知识至少可以说是差劲。

:集中

我不太清楚:焦点是否适用于触摸屏上的场景。只是添加这个伪类就可以了吗?

非常感谢您的帮助。 (顺便说一句,如果这与任何答案相关,也使用jQuery)

1 个答案:

答案 0 :(得分:5)

好的,在你做任何事情之前,你会想要定义你的事件(你可以基于无触摸类来完成)。从那里开始,我只是选择切换一个类,它仍然允许你的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

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