图片提示效果——巩固jQuery中的DOM操作

       在现代的浏览中,它们自带了超链接提示,但这个提示效果的响应速度是非常缓慢的,考虑到良好的人机交互,需要当鼠标移动到超链接的一瞬间就出现提示。

原图(未触发事件的效果图):


事件触发效果图:



实现这个效果的具体思路:

1、当鼠标滑入超链接

    (1)创建一个div元素,其内容为title属性的值

    (2)将创建的元素追加到文档中

    (3)设置x坐标和y坐标,使它显示在鼠标位置的旁边

2、当鼠标滑出超链接是,移除div元素

3、当鼠标在超链接上移动时,提示效果跟鼠标一起移动

html代码:


css代码:


js代码:



©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,752评论 1 11
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,376评论 3 119
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,565评论 0 8
  • 比较经典的例子就是穿着很普通的人进到名牌衣服店,店员们狗眼看人低的态度,所谓素质好点的还会说一句欢迎光临,素质不好...
    东不至西阅读 902评论 0 2
  • 一提到我家的小狗,我就想上去一顿拥抱,他是从我姑姑家里领上来的一只小狗,是奶奶领上来的,之后她在我们家的职业就是看...
    56369e731cad阅读 209评论 2 1

友情链接更多精彩内容