Databases
StackOverflow2013
Postsdbo
POHow to simulate hover effect on touch devices?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to simulate hover effect on touch devices?
    primarykey
    data
    text
    <p>I have a web page with some css3 animation on hover and I would like to make it work on iPad (and any touch enabled device) when the user touch these elements.<br> Here's my code:</p> <p>html: </p> <pre><code>&lt;div id="headBlock"&gt; &lt;a id="arm"&gt;&lt;/a&gt; &lt;div id="head"&gt; &lt;div id="blink"&gt;&lt;/div&gt; &lt;div id="lid"&gt;&lt;/div&gt; &lt;div id="man"&gt;&lt;/div&gt; &lt;a id="man-arm"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>js: </p> <pre><code>//arm $('#arm').hover(function(){ $(this).removeAttr('style').css('bottom','244px'); $(this).addClass('hover_effect'); }, function(){ $(this).removeClass('hover_effect'); }); //man arm $('#man').hover(function(){ $('#man-arm').removeAttr('style'); $('#man-arm').addClass('hover_effect'); }, function(){ $('#man-arm').removeClass('hover_effect'); }); </code></pre> <p>You can see that when the mouse enter the elements I remove the style then apply a style and add the css class 'hover_effect' and when the mouse leaves I remove the 'hover_effect' class.<br> How can I achieve the same thing on touch devices? The click event doesn't have the a callback so I cannot remove the 'hover_effect' class after the click happens. I tried mousedown and mouseup but it didn't work. I searched stackoverflow and I found this <a href="https://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers">How do I simulate a hover with a touch in touch enabled browsers?</a> but it didn't have any effect.<br> Any idea anyone?</p> <p>Thanks<br> Mauro</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USMauro74
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to simulate hover effect on touch devices?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to simulate hover effect on touch devices?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to simulate hover effect on touch devices?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload