How to achieve the same acitve effect of css mobile terminal and pc terminal

This article focuses on "how to achieve the same acitve effect as css mobile and pc". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to achieve the same acitve effect as css mobile and pc.

It has been a mobile front end for some days, but there has been a problem that has not been solved, that is, the effect of hover: hover is a selector of the elements on which the mouse pointer floats, but because there is no mouse on the mobile end, instead of the touch screen, users do not have "elements on which the mouse pointer floats", and there are very few. So the replacement should be: active this selector, but through practice, found that the situation is not very ideal, sometimes triggered on QQ Browser, there is no trigger, in my mx3 brought from the browser has no effect.

Recently, when I looked at Meituan's H6 page, I found that they did a good job on this effect (to be honest, Meituan did a really good job in H6). After looking at their code, I found that they also use: active to achieve this effect, but they have an extra line of js code.

The code is as follows:

Document.body.addEventListener ('touchstart', function () {})

In fact, this line of code doesn't do anything, but binds a touchstart event to body, and then doesn't do anything.

I have put it into practice and found that it is OK, and the effect is really good. Praise Meituan.

Ps: the browser will have a click highlight effect on the mobile, which can be done by adding a tag or body,html.

The code is as follows:

-webkit-tap-highlight-color:transparent

At this point, I believe you have a deeper understanding of "how to achieve the same acitve effect as css mobile and pc". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!