JS实现按钮及文字的悬停提示

2024-09-05 12:21:32

字体：大中小

来源：转载

供稿：网友

这是用JS实现的按钮及文字上的悬停提示功能，提升你网站的人性服务，适时显示提示信息，指引用户该怎么做，不要小看这些小功能哦，用好了可以提升你网站的品质，大家会喜欢上你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS按钮提示</title><script type="text/javascript"> function window.onload(){     var tip=document.createElement("DIV")     tip.id="oTip"     with(tip.style)    {         position="absolute"         border="1px solid #363636"         backgroundColor="#ffffff"         font="normal 12px Tahoma"         padding="1 3 1 3"        display="none"     }     document.body.appendChild(tip)    document.onmouseover=show    document.onmouseout=hide} function show() {     if(event.srcElement.alt && event.srcElement.alt!="")     {         with(oTip.style)        {             posLeft=document.body.scrollLeft+event.x+10             posTop=document.body.scrollTop+event.y+10             oTip.innerText=event.srcElement.alt             event.srcElement.alt=""             display="block"        }     } } function hide(){     event.srcElement.alt=oTip.innerText     oTip.innerText=""     oTip.style.display="none"} </script></head><body><button alt="这是按钮提示：谢谢支持！">链接</button> 链接</body></html>

上一篇：CSS古典竖排文字

下一篇：一款漂亮的CSS双色炫彩文字