Geek Answers Handbook

Can I hide: hover element (pure css) when I click on iPhone again?

I use a double tap (on iPhone): hover elements to display additional information, without javascript, just css: hover pseudoclass. Now I have a problem that the div that appears on: hover no longer disappears only if I click on another element: hover. Does the variable have a hover function in iOS?

li.to-be-hovered { position:relative; } li.to-be-hovered div.hidden { display:none; } li.to-be-hovered:hover div.hidden { display:block; position:absolute; }

And a little more - width, top, left, margin, background, z-index, etc.

 <div> <ul> <li class="to-be-hovered"> <div class="hidden"> lots of extra information with image, span, link elements </div> </li> </ul> </div>

On my iPhone (4S) div.hidden appears on the first tab on div.to-be-hovered, but no longer disappears when I click to another place outside the element. Does anyone know this effect? Is it possible for it to disappear again using pure CSS, or do I need to use Javascript for all of these elements?

+4
source share
2 answers

simple and no javascript required. Here fix

add this to your css mediaquery

body {cursor: pointer}

+1
source

JS:

 var hidestuff = function() { // Hide lots of extra information with image, span, link elements // $(elm).hide(); } $('html').touch(hidestuff).click(hidestuff);

CSS

 .hidestuff { position: absolute; z-index:1}

So, if the user touches anywhere, but the item to be clicked, "hidestuff" will be hidden

Hope this helps: /

0
source

More articles:


All Articles