Often I am in situations where I need to show a menu on hover and for mobile devices menu should open on click. Now e.g. consider following example:
.btn {
width: 200px;
background-color: #333;
color: white;
padding: 10px;
}
.menu {
display: none;
padding: 15px;
}
.btn:hover .menu {
display: block;
}
.btn:focus .menu {
display: block;
}
<div class="btn">
Button
<div class="menu">I am menu</div>
</div>
Now this automatically works on mobile devices because hover state is sticky on touch devices. But is this hack applicable to all touch devices? That is, is it worth the risk? Would there be some touch device doesn't have hover state sticky? Obviously the alternative is to assign touch/click events with JavaScript on touch devices but this seem redundant because I haven't seen any touch device which don't have sticky hover states?
So my question is:
Is it okay to use the hover state hack or should I use JavaScript events to make it more bullet proof?
:hover
on touch devices :). – Swordtail<a>
-element with:target
, or an<input type="checkbox">
with:checked
- as far as I know, no browser even considers mangling link/form-functionality. – Unreliable