Pure CSS to change the text content by placing the mouse on it_CSS/HTML

css style

Copy code The code is as follows:

.remind span {display:block;margin-top :-22px;}
.remind a:hover {padding-top:22px;}
.remind a {float:left;overflow:hidden;}
.remind{height:22px;line-height :22px;overflow:hidden;padding-left:10px;}

html code

Copy code The code is as follows:

If you need to modify your account, please send the modification information and relevant proof to the email prompt

Specific examples

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Convert text after mouseover</title> <style> #Menu { width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; } #Menu ul { margin:0; padding:0; list-style:none; } #Menu li { width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; } #Menu a { width:100px; float:left; overflow:hidden; } #Menu span { display:block; margin-top:-22px; } #Menu a:hover { padding-top:22px; } </style> <ul id="Menu"> <li><a href="#"><span>HOME</span>Homepage</a></li> <li><a href="#"><span>NEWS</span>News</a></li> <li><a href="#"><span>ABOUT</span>About</a></li> <li><a href="#"><span>CONTACT</span>Contact</a></li> <li><a href="#"><span>PHOTOS</span>PHOTO</a></li> </ul>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]