Databases
StackOverflow2013
Postsdbo
PODisable hover effects on mobile browsers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODisable hover effects on mobile browsers
    primarykey
    data
    text
    <p>I'm writing a Web site that's meant to be used from both desktops and tablets. When it's being visited from a desktop, I want the clickable areas of the screen to light up with <code>:hover</code> effects (different background color, etc.) With a tablet, there's no mouse, so I don't want any hover effects.</p> <p>The problem is, when I tap something on the tablet, the browser evidently has some kind of "invisible mouse cursor" that it moves to the location I tapped, and then leaves it there -- so the thing I just tapped lights up with a hover effect until I tap something else.</p> <p><strong>How can I get the hover effects when I'm using the mouse, but suppress them when I'm using the touchscreen?</strong></p> <p>In case someone was thinking of suggesting it, I don't want to use user-agent sniffing. The same device could have both a touchscreen and a mouse (maybe not so common today, but much more so in the future). I'm not interested in the device, I'm interested in how it's currently being used: mouse or touchscreen.</p> <p>I already tried hooking the <code>touchstart</code>, <code>touchmove</code>, and <code>touchend</code> events and calling <code>preventDefault()</code> on all of them, which does suppress the "invisible mouse cursor" some of the time; but if I tap rapidly back and forth between two different elements, after a few taps it will start moving the "mouse cursor" and lighting up the hover effects anyway -- it's like my <code>preventDefault</code> isn't always honored. I won't bore you with the details unless necessary -- I'm not even sure that's the right approach to take; if anyone has a simpler fix, I'm all ears.</p> <hr> <p><strong>Edit:</strong> This can be reproduced with bog-standard CSS <code>:hover</code>, but here's a quick repro for reference.</p> <pre><code>&lt;style&gt; .box { border: 1px solid black; width: 150px; height: 150px; } .box:hover { background: blue; } &lt;/style&gt; &lt;div class="box"&gt;&lt;/div&gt; &lt;div class="box"&gt;&lt;/div&gt; </code></pre> <p>If you mouse over either of the boxes, it will get a blue background, which I want. But if you tap on either of the boxes, it will also get a blue background, which is the thing I'm trying to prevent.</p> <p>I've also posted a sample <a href="http://sandbox.excastle.com/stackoverflow/8291517.html" rel="noreferrer">here</a> that does the above and also hooks jQuery's mouse events. You can use it to see that tap events will also fire <code>mouseenter</code>, <code>mousemove</code> and <code>mouseleave</code>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJoe White
    1. USJoe White
    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
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODisable hover effects on mobile browsers
      1. USZevan
      1. VTFavorite
    2. VO
      singulars
      1. PODisable hover effects on mobile browsers
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODisable hover effects on mobile browsers
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO@Blender, did you read the question? I already explained why user-agent sniffing is a bad choice.
      singulars
      1. PODisable hover effects on mobile browsers
      1. USJoe White
 

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