标记中加入这段代码:onmouseover="this.className=''style1''" onmouseout= "this.className=''style2''"。至此,制作完成,能产生效果的那段文字的源代码是这样的:
鼠标在这段文字上,文字变大,鼠标离开时变小。
不使用Dreamweaver的网友只要把代码改成上面这样就行了,预览一下就可看到实际效果了。二、同时动态地改变文字的大小、颜色、加粗这个例子的效果是:鼠标在文字上,文字的大小、颜色发生改变且加粗,鼠标离开时恢复原样。这个例子的制作方法与例一相同,不同的只是在CSS中定义了不同的文字属性,所以制作方法不再重复。在与之间增加的CSS代码为: 制作完成,能产生效果的那段文字的源代码是这样的:鼠标在这段文字上,改变文字的大小、颜色、加粗,鼠标离开时恢复原 样。
三、动态改变部分文本的背景这个例子的效果是:当鼠标移到某行文本上,这行一部分文本的背景改变了,而本行的另一段背景却不变。 这个例子与上面的例子在制作方法上有点改变,上面的例子都是对整段文本的属性进行改变,所以把触发事件加载在“P”标记上;而本例是只改变一段文本的一部分的背景颜色,所以应先用"Span"标记把要改变背景的文本括起来,然后把触发事件加载到“Span”标记上。 本例在与之间增加的CSS代码为: 制作完成,能产生效果的那段文字的源代码是这样的:当鼠标移到这段文本上,背景改变了,而本 行的另一段背景却不变。
四、给超级链接动态加图标这个例子的效果是:当鼠标移到某个超级链接上,它的左边会出现一个图象,鼠标移开,图象消失。 本例在制作方法上与上例相同,都是改变文本的背景,但在制作时要注意几点: 1、在设置CSS的背景时是选择图象背景,并在设置图象背景的“repeat”参数时要选择“no-repeat”(不平铺); 2、在设置超级链接时,在其左边要预留出图象的位置; 3、触发事件要加载在超级链接上。 本例在与之间增加的CSS代码为: 制作完成,能产生效果的那个超级链接的源代码是这样的:将鼠标移动过来 通过动态改变文本的CSS属性,还可以做出许多特效,但方法基本相同,不再一一例举了,掌握了方法,你就可以发挥想象力去创作了。上一篇:用css动态生成闪字的代码
QQ客服
公众号
手机版
帮助中心