CSS hover function won’t work on iOS.

Question

If I do in HTML <p class =“p1”>Example</p>
And in CSS .p1 {font-size:18px;
color:blue;
border:3px solid red;
}
and so on with other stuff and then
.p1:hover { color:red;
border:3px solid blue;
} it won’t work... it does on android and I’m new to iPhones, any help is appreciated.

Answer 1

XPG DZX that's not how hover is supposed to be working I guess, it wasn't meant for phones.

Hover works by hovering the mouse on an object, without clicking at it. This can't be done on neither Android nor iOS. If you want to test your code, test it on a computer.

I'm not sure tho, it's just what I think, I'll search for it a little.

EDIT:

Apparently, it does not work on phones. You should add some media queries to trigger the hover event with a click.

Answer 2

https://code.sololearn.com/Wkh22Qbl6Jmb/?ref=app

it works on my device.

Should be working fine on iOS Safari too.
https://caniuse.com/#search=%3Ahover

Answer 3

XPG DZX it looks like there are few solutions to this problem, but I haven't tried them:

1. Add the 'active' event to your CSS, like this:
.p1:hover, .p1:active {
// what you want
}

2. Or, you can add an empty onclick event in HTML
onclick=""

Answer 4

I don't quite understand your question. Hover should work with a mouse, how did you manage to make it work on android in the first place?

Answer 5

This is the code, my code is public under name "Example" if you wish to see full code w/ HTML.
.p1 {
color:blue;
font-size:18px;
border:3px solid red;
padding:10%;
margin:5%;
text-align:center;
background-color:white;
}

.p1:hover {
color:red;
border:5px solid blue;
font-weight:bold;
font-size:22px;
}

Answer 6

Exactly the same, before I delete8d my old code it worked perfectly on Android, downloaded the app on my iPhone and it showed everything too just didn't change the effect when tapped/hovering on a specific text.

I don't understand it but I can post the CSS code of how it currently works on Android with a new code, but it won't work on iOS for some reason.

Answer 7

To simplify it, for the hover, I can tap text and the effect changes when on Android, but for iOS the same concept doesn't seem to work, I can tap the text whilst running it but the effect won't change.

Answer 8

I understand hover is for a mouse, but works on my android phone.

Do you know a possible solution? I read a "onclick" command earlier but that didn't work for me.

I do prefer computers for it but my laptop is between 11-12 years old (Lenovo ThinkPad T400).

Answer 9

Thanks, I'll try tomorrow 🙏

Answer 10

Note[1] As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.
https://caniuse.com/#feat=mdn-css_selectors_hover

https://dev.webonomic.nl/fixing-the-iphone-css-hover-problem-on-ios