我有内容显示悬停在页面上的另一个元素上。在触摸屏上,这需要点击一下。
我知道 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 >></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 知识至少可以说很差。
:重点?
我不太清楚 :focus 是否适用于我在触摸屏上的场景。只需添加这个伪类就可以解决问题吗?
非常感谢这里的任何帮助。(顺便说一句,如果这与任何答案相关,也使用 jQuery)