使用jquery实现鼠标悬停显示层

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script type="text/javascript" src="jquery-1.8.1.min.js"></script>

</head>

<body>

<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">

提示1效果

</div>

<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;">

提示2效果

</div>

<a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>

<br><br><br><br><br>

<a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>

<script type="text/javascript">

    function show(obj,id) {    

        var objDiv = $("#"+id+"");

        $(objDiv).css("display","block");

        $(objDiv).css("left", event.clientX);

        $(objDiv).css("top", event.clientY + 10);  

    }

    function hide(obj,id) {

        var objDiv = $("#"+id+"");

        $(objDiv).css("display", "none");

    }

</script>

</body>

</html>

代码来自网络

常用的js效果的更多相关文章

  1. ASP.NET中常用输出JS脚本的类（来自于周公博客）

    using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...

  2. 160229-01、web页面常用功能js实现

    web页面常用功能js实现   1.网页未加载时弹出新窗口 <body onunload="window.open('http://www.a68.cn');">< ...

  3. 类js效果

    类似js效果,点击看看  代码 onclick="return confirm('您确定要看看吗?')" 放入a标签里面

  4. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  5. m.jd.com首页中的js效果

    m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...

  6. 几种常用的JS类定义方法

    几种常用的JS类定义方法   // 方法1 对象直接量var obj1 = {    v1 : "",    get_v1 : function() {        return ...

  7. 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  8. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  9. JS效果的步骤

    一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a.  display:none;         显示为无,不占据空间 b.  vi ...

随机推荐

  1. js 个人笔记

    /* * Created by lsw 2018-06 */ ; (function (window) { //js ready var ie = !!(window.attachEvent & ...

  2. ssh免密登陆：sshpass -p [passwd] ssh -p [port] root@192.168.X.X

    正文: ssh免密登陆:sshpass -p [passwd] ssh -p [port] root@192.168.X.X

  3. vue面试题总结

    1.vue双向绑定的实现原理2.js的继承和原型链3.es6语法箭头函数和普通函数的区别 普通函数的this总是指向它的直接调用者. 在严格模式下,没找到直接调用者,则函数中的this是undefin ...

  4. webpack2 实践

    实例gif图: 目录截图: 目录介绍: dist目录(最后生成的目录,里面文件为配置webpack自动生成的): c/:css文件夹; i/:img文件夹; j/:js文件夹; src目录下(开发目录 ...

  5. ROS与C++

    构建工作空间 catkin_make 构建Catkin包 catkin_create_pkg # This is an example, do not try to run this # catkin ...

  6. .Net core----使用容联云短信推送

    一直在忙于写接口,也没有时间去好好的整理的一片文档,写一篇经常的用到的短信推送案例 还是比较喜欢干货  作为有个程序员 有时候复制粘贴习惯了   实在的还是比较实在 比如能用复制解决的为什么不用复制 ...

  7. Uni-app事件处理

    事件表: Web事件 uni-app事件 click tap touchstart touchstart touchmove touchmove touchcancel touchcancel tou ...

  8. 屏蔽eslint代码格式报错

    1.在文件中找到node_modules 2.node_modules文件夹下的eslint-config-standard 3.打开eslint-config-standard文件夹下的eslint ...

  9. zabbix_agentd客户端安装与配置(windows操作系统)

    zabbix_agentd客户端安装与配置(windows操作系统)   **********  客户端操作   **********  标注:监控zabbix_agentd客户端安装对象是win s ...

  10. 2018-2019-2 网络对抗技术 20165328 Exp4 恶意代码分析

    实验内容: 系统运行监控(2分) 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分析该文件,综述一下分析结果.目标就是找出所有连网的程序,连了哪里,大约 ...