使用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. [Kubernetes]浅谈容器网络

    Veth Pair 这部分内容主要介绍一个设备: Veth Pair . 作为一个容器,它可以声明直接使用宿主机的网络栈,即:不开启 Network Namespace .在这种情况下,这个容器启动后 ...

  2. centos7 把终端显示改为英文/中文

    把终端显示改为英文: 1.先备份语言配置文件 cp /etc/locale.conf /home/locale.conf.backup 2.打开配置文件 vim /etc/locale.conf 3. ...

  3. [原创] f2fs文件系统源代码分析 —— 基于3.8内核 （一）

    作者:高翔 <esxgx@163.com>本文著作权归作者所有,请在转载引用时保留原文网址. 在全文开始,首先记录f2fs被3.8主线merge的mailing list:[GIT PUL ...

  4. NB学校的NB课程的NB教材——CSAPP

    CMU是全美以至全球公认的CS最猛的大学之一,没办法,作为CS的发源地,再加上三位神一样的人先后在此任教:Alan Perlis(CS它祖宗+第一届Turing奖获得者).Allen Newell(A ...

  5. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

  6. 马拉车算法——边界拓展时加限制hdu4513

    #include<bits/stdc++.h> using namespace std; #define maxn 500005 int n,p[maxn],s[maxn],s_new[m ...

  7. 为什么阿里巴巴禁止在 foreach 循环里进行元素的 remove/add 操作--java.util.ConcurrentModificationException

    摘要 foreach循环(Foreach loop)是计算机编程语言中的一种控制流程语句,通常用来循环遍历数组或集合中的元素. 在阿里巴巴Java开发手册中,有这样一条规定: 但是手册中并没有给出具体 ...

  8. 饮冰三年-人工智能-Python-30 python开发中常见的错误

    1:触发条件:创建的实体类生成到数据库表时报错 报错信息:TypeError: __init__() missing 1 required positional argument: 'on_delet ...

  9. 解决idea server 控制台乱码问题

    如果网上其他方式不奏效,可尝试下面方法: 找到tomcat 的配置文件:"D:\Program Files\apache-tomcat-9.0.17\conf\logging.propert ...

  10. UOJ#394. 【NOI2018】冒泡排序

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ394.html 题解 首先我们发现一个数不能既被往左换又被往右换.也就是说不能有任何一个数左边有比他大的, ...