0

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)

Community
  • 1
  • 1
user1154435
  • 159
  • 3
  • 14

1 Answers1

5

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.

Chad
  • 5,308
  • 4
  • 24
  • 36
  • Thank you – very kind. Could you just briefly let me know the difference between the two lines? I can see the exclamation mark at the start of the line, and it seems when this line is used I can hover on a no-touch computer, whereas I can't with the first line... Just wanted to double check that I really understand the difference. – user1154435 Oct 01 '13 at 15:31
  • Sure, it's just an if statement. The first one says if it has the class, the second one says if it !does not have the class. – Chad Oct 01 '13 at 15:32
  • Thanks so far. Will test it all tomorrow when I have a touch screen device at hand. – user1154435 Oct 01 '13 at 15:56