Css mobile terminal: Implementation of acitve effect and css mobile acitve Effect

Css mobile terminal: Implementation of acitve effect and css mobile acitve Effect

There have been some days before the Mobile front-end, and there has been a problem that has not been solved, that is, the same effect as the pc: hover ,: hover is a selector of the elements with the mouse pointer floating on it, but because there is no mouse on the Mobile End, instead of the touch screen, the user does not have the "elements on which the mouse pointer floats", and there are few. So it should be replaced by the active selector, but through practice, it is found that the situation is not very good, sometimes triggered on the QQ browser, whether or not to trigger, in my mx3 self-browser, it is useless.

Recently, when I checked the h5 page of Meituan, I found that they have done a good job in this aspect (to be honest, Meituan has done a good job in h5). After reading their code, I found that they also use: active to achieve this effect, but they have an additional line of js code,

document.body.addEventListener('touchstart', function () { });

In fact, this line of code does not do anything, just binds a touchstart event to the body, and then does nothing.

I have tried it and found that it works well. Like Meituan.

Ps: in the mobile terminal, the browser will have a built-in click highlight effect. You can add a tag or body or html

-webkit-tap-highlight-color:transparent;

Yes.

CSS + DIV move up and switch Effect

This is not implemented in css, but in js. Add the mouseenter event to the menu on the left. After the mouse enters, set the display of the corresponding div on the right to block. Set the display of the remaining div to none to roughly implement this effect.
You can use jquery ui. This component has been integrated and can be implemented by a function.
Jqueryui.com/tabs/
Jqueryui.com/accordion/
Let's take a look.

Css a: How can I achieve the same effect of moving the mouse away from other places?

A: active is the effect of Mouse clicking. Do you want to display the effect of a: link after leaving? Do you want to display the effect of a: visited (depending on whether the accessed link is used)