Home > Developer > Mobile Develop

Mobile: Workaround for invalid active pseudo-class

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

: The active pseudo-class is often used to set the style of a link in a clicked State or other activated state. Most commonly used in anchor points <a href= "#" > in this case, other elements, such as button, are also supported under the general mainstream browser. In multi-button mouse system,: Active only for the main button, most of the current situation is the left button is the primary key.
The CSS style defined under the pseudo-class is triggered only when a short moment between the mouse button is pressed and the mouse button is released. Using the Keyboard's TAB key can also trigger: active state.


said: The active pseudo-class will have to mention: Link,:visited,:hover,:active this four, most commonly used for a link, set the mouse interaction when the different link color. The following example: 

A:link {/* essentially means a[href], or that the link actually goes somewhere */  color:blue;} a:visited {  color:purple;} a:hover {  color:green;} a:active {  color:red;}


In the code above, putting: visited to the end will result in the following results: If the link has been accessed, a:visited will overwrite: active and: Hover style declaration, the link will always render purple, regardless of mouse hover or press activate, the link will remain purple.

For this reason, the above code must be defined in order, generally referred to as Lvha-order:: Link-:visited-:hover-:active, for the convenience of memory, can be remembered as "Love HATE"


L:link
O
v:visited
E


H:hover
A:active
T
E


Browser compatibility:


chrome safari opera ie android
Yep 2.0.4+ Any 4 + 4 + TBD TBD


In the project is the mobile page to do a button state switch effect, on the PC Test no problem, to the mobile phone to find the normal Android, iOS is not effective.


Source: 

. Slotbtn{width:5.5rem;height:4rem;background:url (.. /images/sbtn.png) no-repeat 0 0;-webkit-background-size:100% auto;background-size:100% auto;overflow:hidden;cursor: Pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;}. Slotbtn:active,. Slotbtn:focus{background-image:url (.. /images/sbtn_active.png);}



HTML code: 

<div class= "Row tc row-sbtn" ><span id= "slotbtn" class= "slotbtn" ></span></div>

Page:

Although it is known that the jquery mobile framework often uses the operation class method to switch button state, but it is very cumbersome, poor performance. And we have: the nature of active custom properties, why not Shejinqiuyuan it??


After a search, it was found in the Mozilla Development community: The answer that active doesn't work:


[1] By default, Safari Mobile does not use the:active state unless there are a Touchstart event handler on the relevant El Ement or on the <body>.


it appears that in the mobile device of the iOS system, a Touchstart event needs to be bound on the button element or body/html to activate: the active state. 

Document.body.addEventListener (' Touchstart ', function () {//... Empty function can});


With the above event listening code added, you can see the toggle effect on Safari Mobile After the button is pressed.

Reference article: Https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Reprint please indicate the CSDN blog "Mobile: Active Pseudo-Class invalid solution" from Freshlover http://blog.csdn.net/freshlover/article/details/43735273

Mobile: Workaround for invalid active pseudo-class

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
hdcp workaround invalid input syntax for integer invalid value for registry error ldap syntax for active directory certificate for server is invalid iphone ldap format for active directory ldap filters for active directory

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More