Simply use media queries. The larges protrait mode screen width for smartphones is 480px. So you tell all screens at 480px or below a different CSS then then screen above 480px.
.mydiv{
background-color:white;
color:red;
}
@media only screen
and (min-width: 481px) {
.mydiv:hover{
background-color:red;
cursor: pointer;
color:white;
}
}
@media only screen
and (max-width: 480px) {
.mydiv:active{
background-color:red;
cursor: pointer;
color:white;
}
}
There’s simple solution to it. This is the code!
function myFunction(){
var x = document.getElementById("DIV");
x.style.backgroundColor="red";
x.style.cursor="pointer";
x.style.color="white"
}
function my2Function(){
var x = document.getElementById("DIV");
x.style.backgroundColor="white";
x.style.color="red"
}
.mydiv {
background-color: white;
color: red;
}
.mydiv:active {
background-color: red;
cursor: pointer;
color: white;
}
<div class = "mydiv" id="DIV" onmouseover="myFunction()" onmouseleave="my2Function()">
hi
</div>
I have a div that has
.mydiv{
background-color:white;
color:red;
}
.mydiv:hover{
background-color:red;
cursor: pointer;
color:white;
}
and I would like to have nice hover-like properties also on touch devices. The behavior I get is not exactly what I want. The hover-like behavior does occur, but it is sticky. I discovered that if I instead add
.mydiv:active{
background-color:red;
cursor: pointer;
color:white;
}
then the stickiness goes away, and it works as I want. However, then the normal hover behavior (on non-touch devices) goes away. 🙁
What is the right way to do this?
I don’t think that quite solves it. For example, an iPad can have a width well above 480px, yet should still have the touch (active) behavior.
you can simply raise the pixel count to also include tablets. Also combine it with portrait or landscape mode.
How would you raise the pixel count to include, say, an iPad Pro, without it also affecting desktop folks who don’t use their browser at full width? I don’t mind folks who have narrow browser viewports to see a “mobile” version, but I don’t want th experience to be broken, which it would be if they also see the :active version as opposed to the :hover version. Does that make sense?
