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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.