js超漂亮的鼠标提示，带人性化缺口

</p> <p><title><a href="https://kunjuke.com/tag/64762/" title="鼠标提示" target="_blank">鼠标提示</a>符</title> </p> <p>* { padding: 0; margin: 0; }<br /> li { }<br /> body { background: #fdf7f7; } </p> <p>#explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: center; line-height: 60px; }<br /> #explain a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; }<br /> #explain a:hover { border-bottom: 2px solid #990000; }<br /> #explain strong { color: #990000; }<br /> ul { width: 716px; position: absolute; top: 260px; left: 50%; margin-left: -358px; }<br /> li { width: 160px; height: 100px; list-style: none; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; float: left; margin-right: 10px; cursor: pointer; }<br /> img { float: left; }<br /> #topic { width: 270px; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; position: absolute; top: 100px; left: 200px; }<br /> #topic .adorn { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729602.gif); position: absolute; bottom: 15px; left: -7px; }<br /> #topic .adorn_r { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729137.gif); position: absolute; bottom: 15px; right: -7px; }<br /> #topic .inner_html { padding: 10px; line-height: 20px; font-size: 12px; color: #666; text-indent: 24px; font-family: arial; }<br /> #topic .inner_html a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; }<br /> #topic .inner_html a:hover { border-bottom: 2px solid #990000; } </p> <p>可以调整窗口大小，再把鼠标移到图片上查看…… </p> <ul id="content"> <li></li> <li></li> <li></li> <li></li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• js操作输入框提示信息且响应鼠标事件
• js实现完全自定义可带多级目录的网页鼠标右键菜单方法
• js实现文字跟随鼠标移动而移动的方法
• js根据鼠标移动速度背景图片自动旋转的方法
• JS实现鼠标箭头变成一个燃烧烛光效果的方法
• JS网页在线获取鼠标坐标值的方法
• js实现背景图片感应鼠标变化的方法
• js实现鼠标感应图片展示的方法
• js实现动画特效的文字链接鼠标悬停提示的方法