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

Question

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

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.

This is what I've got:

<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>

and

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

Here in action: http://jsfiddle.net/ju6bX/45/

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).

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?

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

Answer 1

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

Fiddle

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