需求描述:当鼠标悬停在一个元素上的时候,显示气泡,气泡内容可以是一段文字或图片。实现如下:
html>
气泡显示
.container{
margin-top:130px;
}
#xsztip{
padding:8px12px;
width:140px;
display:block;
font-size:16px;
color:#fff;
font-weight:bold;
background:#ED5517;
cursor:pointer;
}
#xszimg{
position:absolute;
display:none;
padding:10px;
width:160px;
background:#e0edf7;
border-radius:6px;
}
#xszimg::before{
content:"";
position:relative;
top:-20px;
left:10px;
width:0;
height:0;
display:block;
border-left:10pxsolidtransparent;
border-right:10pxsolidtransparent;
border-bottom:10pxsolid#e0edf7;
}
鼠标悬停显示气泡
这是需要提示的文字内容,可以修改!
$(function(){
$("#xsztip").hover(function(){
show_xszimg(this);
},function(){
show_xszimg();
});
functionshow_xszimg(f){
vard=$("#xszimg");
if(!f){
d.fadeOut()
}else{
varc=$(f);
vare=c.offset();
vara=e.left;
varb=e.top+44;
d.css({left:a+"px",top:b+"px"}).show();
}
}
});