How to remove ':hover' when using a touchscreen? - html

Question

When this code runs on a tablet/mobile, the user has to tap twice to reach the linked URL. Instead, is there a way to remove the hover effect when viewing on a touchscreen device without using '#media screen and (max-width: XXXpx)'? - I would really like the hover effect to remain on a desktop site, no matter what width a desktop browser is resized to.
Many thanks in advance!
a:link,
a:visited,
a:hover,
a:active {
color: white;
text-decoration: none;
}
#container {
position: absolute;
display: table;
width: 200px;
}
#one {
position: relative;
display: table-cell;
background-color: orange;
vertical-align: middle;
text-align: center;
height: 200px;
width: 200px;
}
#one:hover {
background-color: green;
}
#one:hover > #hello {
display: none;
}
#one:hover > #world {
font-size: 1.2em;
display: block;
}
#hello {
font-size: 1.2em;
display: block;
}
#world {
display: none;
}
<div id="container">
<a id="one" href="http://www.google.com">
<p id="hello">Hello</p>
<p id="world">World</p>
</a>
</div>

Answer 1

You can add a class on the root / html element ie:
var root = document.querySelector(":root");
if ( 'ontouchstart' in window ) {root.classList.add("touch")}
then use the negation CSS pseudo-class
:root:not(.touch) #one:hover {
background-color: green;
}
:root:not(.touch) #one:hover > #hello {
display: none;
}
:root:not(.touch) #one:hover > #world {
font-size: 1.2em;
display: block;
}
alternative
var root = document.querySelector(":root");
'ontouchstart' in window ? root.classList.add("touch") : root.classList.add("no-touch")
then
.no-touch #one:hover {
background-color: green;
}
.no-touch #one:hover > #hello {
display: none;
}
.no-touch #one:hover > #world {
font-size: 1.2em;
display: block;
}
for touch
.touch #one{
/*something else*/
}