1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > quill鼠标悬浮 出现提示_html实现鼠标悬停显示气泡文字内容

quill鼠标悬浮 出现提示_html实现鼠标悬停显示气泡文字内容

时间:2021-09-13 06:04:22

相关推荐

quill鼠标悬浮 出现提示_html实现鼠标悬停显示气泡文字内容

需求描述:当鼠标悬停在一个元素上的时候,显示气泡,气泡内容可以是一段文字或图片。实现如下:

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();

}

}

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。