网页的超链接功能为我们带来了很多方便之处,最常见的就是在读到某一段文字时,如果某个词或句子有链接,我们可以点击这个链接访问与这个词有关的相关信息,无形之中帮助我们对内容建立起了很多关联,使我们能够更方便的阅读内容,但是有些时候某个词的解只有短短的一句话,这时如果单独为它做一个网页似乎不合理,而使用括曳叉参誓’正文的完整性,这时我们就可以使用CSS来建立一个小提示窗口,让解释文字在不用喻时候隐藏在页面中,当鼠标移上时便可以马上显示在画面上,小提示窗口的原理与摹基于CSS的扩展,通过控制a对象的标准状态与hover状态下的不同行为来做到毒控制小窗的显示。天津网站建设
.目前的XHTML代码仅仅是一段文本,可以看到,在这段文本中有许多名字,如W3C,CSS,HTML等,我们的目标是让这些名字拥有一个可以由鼠标移上就可以出现的解释文本,考虑到要实现鼠标的交互,天津网站制作,天津做网站,因此必须对文本使用a链接对象,这样我们就能够应用其hover状态下的样式,另外需要将解释文本用一个标签放置在a对象之中,以文中的CSS举例,我需要对CSS嵌入以下代码:
我们将CSS下的作为显示解释的对象,在未来将对其进行一些样式上的美化,天津网站优化,考虑将这种小提示与其他的a对象鼻区分开,我们对小提示用的a对象class,我们就可以开始CSS代码的编写:首先是a链接的标准状态,在标准状态下,a对象下面的span对象将使用display:none;不显示,对a使用position:relative;相对定位,这样我们在后面就可以对span进行相对于a的接下来就是编写a的hover行为的样式代码:我们先来看a.卸:hover时的span的定义,我们使用display:block;将其置为显示状态,并使用position:absolute;绝对定位,当然这里并不是让它与整个窗口进行绝对定位,由:fqpV衫e6对a对象进行了position:relative;相对定位,他下面的span对象使用absolute属性后,将相于a进行定位,而并非我们所理解的绝对定位。通过这样的定位方式,就可以控制对于a的位置。而a.tip:hover中的cursor:hand;则是一个小技巧,因为IE对hover伪对象的支持不秽孓矿善,只有设置了cursor:hand:之后,才能使a的hover状态下,可以对其中的span进行isplay:block;的设置,而在Firefox中就没有这个问题了,这应该算是对IE的一个特秘賢.我们的编码就这样算是完成了,我们来预览一下实际效果。当鼠标移上文字时,提示信息就按我们预定的位置显示出来,可以利用这个功能,为文中的其他需要解释的名词都加上提示,这样我们的文本阅读起来就更加方便了。
一个真实的应用,MyBlogLog.com提供针对blog上的链接的统计数据,用于记录blog的每一个链接被用户访问了多次,当用户鼠标移上每一个链接时,旁边就是出现最统计数据,不能够修改页面加入元素的显示信息,但却通过产生一个新div通过定位放置在相应的位置,并能与a对象移上a对象时,能够将相应的内容放置到链接旁边。