纯CSS实现鼠标放上去改变文字内容

robot

80572 主题	0 好友	积分

离线发信

电梯直达

楼主

发表于 2017-03-10 21:49 | 显示全部楼层 | 倒序浏览

css峰

浠ｇ濡涓:


.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浠ｇ

浠ｇ濡涓:


<div class="remind"><a target="_blank" href="http://www.jb51.net#"><span>濡淇瑰凤璇峰淇逛俊稿宠抽</span>绀lt;/a></div>

蜂瀹渚

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>榧缁杩㈡瀛</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> </head> <body> <ul id="Menu"> <li><a target="_blank" href="http://www.jb51.net#">HOME棣椤/a></li> <li><a target="_blank" href="http://www.jb51.net#">NEWS伴/a></li> <li><a target="_blank" href="http://www.jb51.net#">ABOUT充</a></li> <li><a target="_blank" href="http://www.jb51.net#">CONTACT绯/a></li> <li><a target="_blank" href="http://www.jb51.net#">хPHOTO</a></li> </ul> </body> </html>

来源：http://www.jb51.net/article/50189.htm

收藏0 支持0 反对0

回复点评

返回列表

首页| 论坛| 博客| 新闻| 图片| 视频| 笑话| 阅读| 工具


	选中 0 篇: 警告\| 屏蔽\| 删除\|

选中 0 篇:

纯CSS实现鼠标放上去改变文字内容