CSS implementation: move the mouse over and change the link text instance code,

CSS implementation: move the mouse over and change the link text instance code,

CSS implementation: move the mouse over and change the link text instance code:
When the mouse slides over, sometimes the text in the link needs to be changed. if Javascript is used, it is better to implement it. Of course, it is not difficult to use CSS. Below is a code example like this, the following is an introduction, hoping to help those who need it.
The Code is as follows:

 

<! DOCTYPE html> 
 
The above Code meets our requirements. When the mouse is hovering over the link, the text can be switched. The following briefly introduces the implementation principle.
I. Implementation principle:
The principle is actually very simple. The English text is not displayed because the margin-top value of the span element is set to-22px, which happens to be the height of the li element, in this way, the English text is hidden. When you move the mouse over the link, the padding-top attribute value of the link is set to 22px, so that the span element can be displayed.
Ii. Related reading:
1. For details about overflow attributes, see overflow attributes in CSS.
2. a: For more information about hover, see section E: hover.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 9629.
For more information, see: http://www.softwhy.com/divcss/