很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果。
代码实例如下:
考高分网 #content { width:100px; height:100px; background:green; position:relative; margin:100px; } #inform { width:200px; height:200px; border:1px solid #ccc; background:white; display:none; position:absolute; } #inform span { width:0px; height:0px; border-width:10px; border-style:none solid solid none; position:absolute; } #inform .tb-border { left:-10px; border-color:transparent #ccc transparent transparent; top:-1px; } #inform .tb-background { left:-9px; border-color:transparent white transparent transparent; }
以上代码实现了我们的要求,当鼠标放在div中的时候能够弹出一个信息层,并且能够跟随鼠标移动,弹出层的带有指示的箭头,代码非常的简单这里就不多介绍了,如有任何疑问可以跟帖留言或者参阅相关阅读。



