使用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. Sql server2012转sql server2008步骤经验总结（转）

    wIndows用户登入选择“数据库”右键选择“附加”点击“添加” 打开数据库,右键选中 选择“任务”→“生成脚本”→“选择对象”→“编写整个数据及所有数据库对象的脚本” →“下一步” “设置脚本编写选 ...

  2. web文件下载

    web页面实现文件下载的几种方法 今天碰到文件下载的一些问题,本着知其然也要知其所以然的精神,站在巨人的肩膀上深入学习和测试了一下,抛砖引玉,现在总结结论如下: 1)标准URL下载方式可以通过在web ...

  3. UGUI中粒子特效与UI的遮挡问题

    问题背景: 在做主线任务时发现完成任务后的特效显示穿透上面的UI层,不美观,策划不乐意了,抓紧解决下 解决思路: 首先讲下影响渲染顺序的因素: 能够影响渲染顺序的因素有:1.Camera Depth  ...

  4. redis安装教程 windows环境

    redis开始入坑啦 安装: gayhub地址:https://github.com/MicrosoftArchive/redis/releases 我装的是win7 64系统  选了第二个 在E盘新 ...

  5. jQuery之cookie操作

    Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jq ...

  6. Mybatis自定义分布式二级缓存实现与遇到的一些问题解决方案!

    先说两句: 我们都知道Mybatis缓存分两类: 一级缓存(同一个Session会话内) & 二级缓存(基于HashMap实现的以 namespace为范围的缓存) 今天呢, 我们不谈一级缓存 ...

  7. asp.net table/gridview 合并列

    public void MergeCell(TableRow trow) { TableCell currentCell = trow.Cells[0]; TableCell prevCell = n ...

  8. OpenCV-Python：霍夫变换

    霍夫变换常用来在图像中提取直线和圆等几何形状.如下图: 我们下面来看看如何使用霍夫变换来检测直线.一条直线可以用数学表达式 y = mx + 或者 ρ = xcosθ + y sinθ表示(极坐标) ...

  9. redis单点、redis主从、redis哨兵sentinel，redis集群cluster配置搭建与使用

    目录 redis单点.redis主从.redis哨兵 sentinel,redis集群cluster配置搭建与使用 1 .redis 安装及配置 1.1 redis 单点 1.1.2 在命令窗口操作r ...

  10. Node js redis

    const redis = require('redis');//redis , '172.16.4.2'); //redis操作 client.set("hello", &quo ...