首先做一个简单的提示窗口。编写HTML代码,把所有的提示窗口内容放在一个span对象中。
然后对其中的内容用CSS进行显示处理。
a.tip
{
color : red ;
text-decoration : none ;
position : relative ;
}
a.tip .popbox {
display : none ;
}
a.tip:hover {
cursor : pointer ; /* 由于IE对hover伪对象支持不完善,设置了cursor:pointer才能正常显示 */
}
a.tip:hover .popbox {
display : block ;
position : absolute ;
top : 15px ;
left : -30px ;
}
color : red ;
text-decoration : none ;
position : relative ;
}
a.tip .popbox {
display : none ;
}
a.tip:hover {
cursor : pointer ; /* 由于IE对hover伪对象支持不完善,设置了cursor:pointer才能正常显示 */
}
a.tip:hover .popbox {
display : block ;
position : absolute ;
top : 15px ;
left : -30px ;
}
要将提示窗口放在所解释的内容边上,必须将tip设置成相对定位:position:relative;然后把span对象设置成绝对定位,position:absolute;.
一般状态下使用display:none;进行隐藏。由于IE对hover支持不够完善,必须在a:tip:hover中指定cursor:pointer。
(网站布局实录-李超 中写的是cursor:hand,确实能够正常显示,当时dreamweaver8中却没有这个属性)
a.tip:hover .popbox
{
display : block ;
position : absolute ;
top : 15px ;
left : -30px ;
}
display : block ;
position : absolute ;
top : 15px ;
left : -30px ;
}
通过以上设置,让鼠标放在超链接上的时候显示。
接下来制作一个复杂带背景并且放了一个图片的。
要显示不规则的图形,首先要制作一个不规则的符合要求的图形作为背景,如果是带箭头的,就需要将没有图形的部分制作成透明背景(photoshop处理就好了)。
改写以下CSS代码:
a.tip:hover .popbox
{
display : block ;
position : absolute ;
top : -240px ;
left : -30px ;
width : 226px ;
height : 242px ;
color : #000000 ;
background-image : url('背景图片.gif') ;
background-repeat : no-repeat ;
}
display : block ;
position : absolute ;
top : -240px ;
left : -30px ;
width : 226px ;
height : 242px ;
color : #000000 ;
background-image : url('背景图片.gif') ;
background-repeat : no-repeat ;
}
注意,在Dreamweaver8中插入图片的时候url('背景图片.gif')没有单引号,这在Firefox中不能够正常显示。
另外设置其重复方式为no-repeat,相对的位置根据具体要求进行设置。
修改span中的内容,添加图片的信息。
设置图片的border,使得FireFox与IE中的显示是相同的。
最后的效果图与代码请查看