Mobile / H5 problems caused by cursor: pointer

The cursor attribute specifies the type (shape) of the cursor to be displayed. This attribute defines the cursor shape used when the mouse pointer is placed within the boundary of an element (but CSS2.1 does not define which boundary determines this range).
However, there is no problem with this attribute when it is used on the PC side, but there is a problem with the mobile side.
Some people say that the mobile terminal cannot use this attribute, and the PC terminal can use it. Yes, that's right, the PC can be used, but the mobile terminal is really not used, because the mobile terminal directly touches the screen with a finger. After clicking, the effect we want directly appears, and this attribute is simply not used. . However, when we develop the mobile terminal, we will inevitably use click events in some places (except the a tag), so we will habitually add a cursor:pointerstyle to the CSS, but after the project is over, we may forget to delete this style At this point, the question is coming.
This problem can be clearly reflected in the tab tab of the mobile terminal, that is, when we click on a navigation on the tab tab, the cursor: pointer style navigation will add an additional background color in an instant, browse on WeChat A blue background color and a blue border will be added to the device. This problem seems to only appear on Android phones. I have tested it with an Apple phone and it does not appear to have this problem.
At first, I didn't know where the problem was, because there was no problem with the css code and js code, and then I found a solution from the Internet, but there was no hair on the Internet about this problem. It seems that the problem was caused by myself , Wool comes out of the sheep. So, I wrote such an effect alone, this time without the cursor: pointer attribute, so there is no such problem, but I still did not think where the problem is. It ’s really the same way, let ’s use the most stupid way, so I took a copy of the original project, and then deleted all the other unrelated codes and styles, leaving only the codes and tags Style, the result can be imagined, still has not solved the problem. Finally, I deleted the styles related to the navigation of the tab page one by one. Finally, I found the cursor:pointerstyle that caused the problem. Haha ..., Emperor Tian does not pay attention to people, delete this style, the problem is solved, the heart is beautiful ~

The following picture is the cursor:pointerstyle that I added to the test page that will cause problems :

688074-20160422111433648-65070801.jpg

It is still not clear why the problem will occur after adding this style. Any children's shoes that you know are welcome to leave a message below, thank you!

Here I strongly recommend that you children's shoes, when developing the mobile terminal, try not to bring the habit of developing the PC terminal to the mobile terminal, otherwise, there will be unexpected surprises waiting for you ~~

Published 51 original articles · 19 praises · 60,000+ views

Guess you like

Origin blog.csdn.net/qq_40999917/article/details/104668742