Home > Developer > Web Develop
Originally done in an HTML table, when the mouse hovers over a row, the row Travel action button, the other row of the action button is hidden. The idea of realization at that time was that when the onmouseover was in a row, all the rows were looped, all the buttons were hidden, and then the lines were displayed. Occasionally have to use the Onmouseourt event, now want to think that this implementation will affect the page efficiency.
A few days ago to see the background list of WordPress, the corresponding record of the operation also used the function, the mouse stop in which line only appears that row of operable buttons, thought is to be realized with JS, see to be looming element is <div class= "Row-actions" >edit| trash...</div>, also searched the JS file for the row-actions string. Busy for a while to look into the CSS to find the implementation, found in the wp-admin/css/wp-admin.css like the following style:
| 12345678 | .row-actions { &NBSP;&NBSP;&NBSP;&NBSP; padding : 2px 0 0 ; &NBSP;&NBSP;&NBSP;&NBSP; visibility : hidden |
Originally it is using CSS hover pseudo-class to achieve the usual want to use JS to achieve the function. Only pseudo-classes such as hover, link, visited, and active were previously known to be applied only to the a tag, which was written as A:hover, A:link, a:visited, and a:active. In fact, these four things can be applied to other HTML tags, assigned to other defined class.
For a CSS pseudo-class, refer to: http://www.w3school.com.cn/css/css_pseudo_classes.asp
| 1234 | a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */ |
Like link, visited, and active do not seem to be used to make a good dynamic effect, and hover is not the same, it implies onmouseover/onmouseout such a behavior, is the mouse hover when the application of a style, and the mouse away from the application of a style. This pseudo-class eliminates the need to use JS events to determine the switching CSS.
Here is a complete application of the pseudo-class hover, the following HTML code:
| 01020304050607080910111213141516171819202122232425262728293031323334353637383940414243 | |
The result of the above code execution is that the mouse pauses in the row in the table, which line will show the action button. Note that the operating button to be looming is placed in the class= "Row-actions", pay attention to the Tr:hover control. Finally, if you put the first line:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
This DTD declaration is removed, there will be no mouse hover on which line to display <div class= "row-action" > The effect of the content, in fact, is the requirements of IE, and even give a statement, such as <! Doctype>,ie is satisfied, can be effective, in other browsers do not <! DOCTYPE ... This statement is all right.
: Hover CSS Pseudo-class application--reprint from (Yehuang Unmi Blog) as a collection
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
