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=";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: /

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)

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

• javascript
• css
• hover
• touch

• Are you using modernizr or anything? – Chad Commented Oct 1, 2013 at 14:06
• @Chad: Yes, as mentioned I'm using Modernizr. – user1154435 Commented Oct 1, 2013 at 14:26
• I've tried to read up on using :focus but it's not clear to me whether or not an enclosing DIV element gets the focus when tabbed on a touchscreen. Any thoughts? – user1154435 Commented Oct 1, 2013 at 15:12
• Don't quote me on this, but I think focus pertains to form input elements (input, textarea). – Chad Commented Oct 1, 2013 at 15:15

1 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 ment out the first line then unment the second.