使用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. 2018-2019-2 20165325 《网络对抗技术》 Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165325 <网络对抗技术> Exp6 信息搜集与漏洞扫描 实验内容(概要) 1 各种搜索技巧的应用: 2 DNS IP注册信息的查询: 3 基本的扫描技术 ...

  2. zimbra6同域名与同hostname与同系统异机恢复

    系统:redhat5.4_64 安装DNS:[root@test6 ~]# yum install bind -y[root@test6 ~]# yum install bind-chroot -y[ ...

  3. Springboot2新特性概述

    官方说明: https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.0-Release-Notes 起码 JDK 8 和支持 ...

  4. HTML5 移动端Meta设置

    1.   强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览. <meta name="viewport" content= ...

  5. 六 java和Tomcat

    Java企业级应用TOMCAT实战 http://blog.oldboyedu.com/java-tomcat/ 老男孩笔记 常规应用架构模型 Tomcat对静态请求效率低,可以做动静分离,动态的给T ...

  6. composer操作简单解析

    1. composer配置中国镜像 #使用命令: composer config -e#修改composer.json 添加如下代码 { "repositories": [ { & ...

  7. 末学者笔记--SSHD服务及SCP用法

    sshd服务讲解 1.SSHD服务 介绍:SSH 协议:安全外壳协议.为 Secure Shell 的缩写.SSH 为建立在应用层和传输层基础上的安全协议. 默认端口22 作用: sshd服务使用SS ...

  8. .NET Core on K8S快速入门课程学习笔记

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 目录 01-介绍K8s是什么 02-为什么要学习k8s 03-如何学习k8s ...

  9. zabbix企业级监控dell硬件服务状态

    监控dell服务的硬件状态,一般有两种方式 第一,在操作熊上安装OMSA,编写脚本调用omreport命令进行监控 第二.使用IDRAC,只需开启在IARAC上的SNMP,zabbix通过snmp进行 ...

  10. Codeforces 1070J Streets and Avenues in Berhattan dp

    Streets and Avenues in Berhattan 我们首先能发现在最优情况下最多只有一种颜色会分别在行和列, 因为你把式子写出来是个二次函数, 在两端取极值. 然后我们就枚举哪个颜色会 ...