使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。
例如:
<style>
.triangle-up {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red
}
.triangle-down {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
}
.triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
.triangle-right {
width: 0
height: 0
border-top: 50px solid transparent
border-left: 100px solid red
border-bottom: 50px solid transparent
}
</style>
<div class='triangle-down'></div> <!--向下三角形-->
<div class='triangle-up'></div> <!--向上三角形-->
<div class='triangle-left'></div> <!--向左三角形-->
<div class='triangle-right'></div> <!--向右三角形-->
原理就是设置块元素的三条边透明掉(tranparent)
你可以通过onmouseover事件来show一个内容为title的自定义box给这个box啦定义样式。------解决方案--------------------------------------------------------<style#tooltip{border:1px solid redbackground:#FF6
position:absolute
padding:1px
color:#333
display:none}</style<script type=text/javascript src=scripts/jquery-1.7.1.min.js</script
<script type=text/javascript
$(function(){var x=10var y=20$(a.tooltip).mouseover(function(e){
this.myTitle=this.title
this.title=
var tooltip=<div id='tooltip'+this.myTitle+</div //创建DIV元素
$(#link).append(tooltip) //追加到文档中
$(#tooltip).css({top: (e.pageY+y) + px,left: (e.pageX+x) + px}).show() //设置X Y坐标, 并且显示
}).mouseout(function(){
this.title=this.myTitle
$(#tooltip).remove() //移除
}).mousemove(function(e){
$(#tooltip).css({top: (e.pageY+y) + px,left: (e.pageX+x) + px})})})</script
<title超链接提示效果</title</head<body<div id=link
<p<a href=# class=tooltip title=这是我的超链接提示1提示1</a</p
<p<a href=# class=tooltip title=这是我的超链接提示2提示2</a</p
<p<a href=# title=这是我的超链接提示1自带提示1</a</p
<p<a href=# title=这是我的超链接提示2自带提示2</a</p</div</bodyjq写的, 你看看是不是你想要的那种效果, 提示框的样式可以自己更改的。。