I made an hover effect that would work well on mouse/keyboard interfaces but not so ideally with touch interfaces. I would like to target touch interface devices with some kind of media query or something that sets the touch input devices away from desktop style devices.
I would have used the screen size media queries but there are tablets whose sizes overlap with those of laptops. Is there a way to target touch interface devices with JavaScript or pure CSS or some other way?
You can do it using pointer media query:
div {
padding: 8px;
width: 200px;
border: 1px solid;
}
@media (pointer:fine) {
div:hover {
cursor: pointer;
background-color: red;
}
}
@media (pointer:coarse) {
div:active {
background-color: green;
}
}<div>Hover me on PC</div>The hover property is defined only for those devices which has mouse(fine cursor);
Or you can apply different property for touch screens using
@media (pointer:coarse)
You can sense if a device is a touch one by looking at some capabilities.
For example, the media query on hover tells you whether the device understands 'proper' hovering.
Here's a simple snippet to demonstrate:
.hov:hover {
color: black;
}
@media (hover: hover) {
.hov:hover {
color: red;
}
}<div class="hov">Hover over me</div>However, you may want to think through exactly which capabilities you want to test for, remembering that some devices may have both touch and mouse actions.