当前位置:Gxlcms > html代码 > CSS实现的鼠标滑过改变链接文字实例代码_html/css_WEB-ITnose

CSS实现的鼠标滑过改变链接文字实例代码_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:20人阅读

CSS实现的鼠标滑过改变链接文字实例代码:
鼠标滑过的时候,有时候需要改变链接中的文本,这个如果使用js就比较好实现,当然使用CSS也并不难,下面就是一段这样的代码实例,下面就做一下介绍,希望对需要的朋友带来一定的帮助。
代码如下:

蚂蚁部落

以上代码实现了我们的要求,当鼠标悬浮在链接上的时候,能够实现文字的切换,下面简单介绍一下实现原理。
一.实现原理:
原理其实很简单,之所以英文文本没有显示,是因为将span元素的margin-top值设置为-22px,这个值恰好是li元素的高度,这样英文文字就被隐藏了,当鼠标放在链接上的时候,会链接的padding-top属性值设置为22px,这样span元素就可以显示了。
二.相关阅读:
1.overflow属性可以参阅CSS的overflow属性一章节。
2.a:hover可以参阅CSS的伪类选择符E:hover一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9629

更多内容可以参阅:http://www.softwhy.com/divcss/

人气教程排行