<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>div切换</title>

<style type="text/css">

.dj{

    width: 400px;

    height: 400px;

    background-color:#A18325;

    display:none;

}

</style>

<script type="text/javascript">

window.onload = function (){

    var x1=document.getElementById("as");

        x1.onmouseover= function (){

            var xd1=document.getElementById("dg1");

                xd1.style.display='block'

            var xx1=document.getElementById("dg2");

                xx1.style.display='none'

        }

    var x2=document.getElementById("bs");

        x2.onmouseover= function (){

            var xd1=document.getElementById("dg2");

                xd1.style.display='block'

            var xx1=document.getElementById("dg1");

                xx1.style.display='none'

        }

}

</script>

</head>

<body>

<div style="width: 50px; height: 50px;background: #3355dd;" id="as"></div>

<div style="width: 50px; height: 50px;background: #6622dd;" id="bs"></div>

<div class="dj" id="dg1"> <br />

            第一个111111111111</div>

<div class="dj" id="dg2"> <br />

            第二个222222222222</div>

</body>

</html>

鼠标滑过切换div显示（鼠标事件）的更多相关文章

  1. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  2. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  3. jQuery文字特效制作文字鼠标滑过多彩色变色显示

    <!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/ht ...

  4. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  5. 鼠标滑过元素，div显示，并根据scrollTop向下移动

    如上图所示,通道有很多个,表格只有一个. 注意:滑过通道时鼠标如果停留在上面,那么表格才显示,鼠标滑过表格时,表格不消失 <div id="lineContent"> ...

  6. 鼠标滑至某位置，在鼠标旁边出现详情弹窗div

    首先效果如下: 代码如下: //这个是一个循环,循环所有name为xx的td标签(也就是给tdname为XXX的添加事件)$("td[name='strGoodsSKU']").e ...

  7. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  8. 鼠标事件之鼠标滑过事件MOUSEOVER

    来源地址:http://www.g2room.com/jquery/index.php?p=example%2Fevent%2Fmouseover.html&n=%E9%BC%A0%E6%A0 ...

  9. Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

    有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...

随机推荐

  1. JavaScript:['1','2','3'].map(parseInt)问题解析

    最近碰到了['1','2','3'].map(parseInt)这种看似不起眼陷阱却极大的问题. 这乍一看,感觉应该会输出[1,2,3].但是,实际上并不是我们想的这样.你可以现在打开console, ...

  2. TLA+和并发系统正确性验证

    TLA+介绍 TLA+(WIKI,官网)是一门领域特定语言,主要用于数理逻辑计算和并发系统的正确性验证.TLA+中的TLA代表的是"行为时序逻辑(Temporal Logic of Acti ...

  3. SpringtMVC运行流程：@RequestMapping 方法中的 Map、HttpServletRequest等参数信息是如何封装和传递的（源码理解）

    在平时开发SpringtMVC程序时,在Controller的方法上,通常会传入如Map.HttpServletRequest类型的参数,并且可以方便地向里面添加数据.同时,在Jsp中还可以直接使用r ...

  4. linux下Tomcat 安装后执行startup.sh，出现– Cannot find …bin/catalina.sh

    linux下Tomcat 安装后执行startup.sh,出现– Cannot find …bin/catalina.sh 是因为权限不够,执行以下命令就可以: chmod +x startup.sh ...

  5. 第一把机械键盘 ikbc C-87

    终于入了机械键盘,ikbc C-87黑色红轴. 原本上周五晚上就到了,但是那个键盘有几个键弹起后弹簧会持续响,敲了一会,实在不能忍受,就申请换货了.新换的键盘今天终于到了,没有了之前的问题,但是几乎每 ...

  6. spring boot高性能实现二维码扫码登录(中)——Redis版

    前言 本打算用CountDownLatch来实现,但有个问题我没有考虑,就是当用户APP没有扫二维码的时候,线程会阻塞5分钟,这反而造成性能的下降.好吧,现在回归传统方式:前端ajax每隔1秒或2秒发 ...

  7. 使用Mifare卡加密数据 笔记

    Mifare 是最常用的射频卡,具体介绍网上太多,我就不说了.,很多城市的最早的地铁公交卡都是用这种卡,后来被破解后都换成智能卡了. 但是由于技术成熟,使用方便,成本低,现在很多小区门禁卡,停车卡,食 ...

  8. npm scripts 使用指南

    转载自:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html Node 开发离不开 npm,而脚本功能是 npm 最强大.最常用的功能之一. ...

  9. html-简单的简历表制作

    代码如下: <!DOCTYOE html> <html> <head> <meta charset='UTF-8'/> <title>课后作 ...

  10. Python十题（第2课）

    一.天天向上的力量 C 一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,由于遗忘等原因能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值 ...