Applying hover state styling to a div can be done like this:
div {
&:hover {
color: red !important;
border: 3px solid red !important;
}
}
To exclude iPads and other tablets from this CSS style, you can utilize a media query:
div {
@media only screen {
&:hover {
color: red !important;
border: 3px solid red !important;
}
}
}
An alternative approach is by using the following:
div {
@media not handheld {
&:hover {
color: red !important;
border: 3px solid red !important;
}
}
}
Despite these attempts, the hover styling still persists on an iPad. If you have suggestions on how to rectify this issue or if I'm misunderstanding media queries, please share your insights!
Your input is greatly appreciated!