<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. Win10+QT5.7.1搭建opencv开发环境

    一.准备工作: 1下载Qt5.7.1软件qt-opensource-windows-x86-mingw530-5.7.1.exe(http://download.qt.io/official_rele ...

  2. OOP面向对象程序设计

    1.对象:程序中描述现实中一个物体的属性和功能的结构 面向对象的程序设计,即为定义相应对象的属性,实现相应的功能.一个对象专门代表现实中的一个物体. *封装事物的属性和功能的结构. 例如 我们的手机: ...

  3. Java环境变量，真的还有必要配吗？

    作为年龄上堪称老鸟而技术上却是菜鸟的老菜鸟,为了祖国的编程事业,不惜拿出一个月工资,淘了一台配置稍高的二手笔记本,打算与老笔记本中的撸啊撸片彻底说再见,誓要在新机种开启一番撸啊撸的新事业.当然,撸代码 ...

  4. PHP基础入门（一）

    php现在很火的后台开发语言,它融合了许多其他的语言,所以它的灵活性不用多说．话不多说,我们开始php的学习吧! 整数类型:$变量名=132;浮点类型:$变量名=1.32;字符串类型:$变量名=&qu ...

  5. GitHub起步---创建第一个项目

    ---恢复内容开始--- 刚起步学习GitHub,边学边说! {参考教程:http://blog.csdn.net/steven6977/article/details/10567719}这里描述的很 ...

  6. maven导入多模块项目

    maven导入多模块项目   一.SVN上Maven多模块项目结构 使用eclipse导入SVN上的Maven多模块项目 Maven多模块项目所在SVN目录 二.eclipse通过SVN导入到工作空间 ...

  7. Activiti就是这么简单

    Activiti介绍 什么是Activiti? Activiti5是由Alfresco软件在2010年5月17日发布的业务流程管理(BPM)框架,它是覆盖了业务流程管理.工作流.服务协作等领域的一个开 ...

  8. mybatis-spring整合

    1. 配置jar包 Spring,mybatis,mybatis-spring,mysql等... <properties> <project.build.sourceEncodin ...

  9. 学习 CosmosDB (NoSql)

    Microsoft Azure官网 学习cosmos DB,也称作 documentDB,NoSql,不是关系型数据库,数据以Json的格式存储,灵活性强. 1.DLL 2.Connector set ...

  10. unix命令

    最近需要用到一些Unix的东西 ,就学习了下这个东西,简单记录下命令,方便以后查询! 1. ls这是最基本的档案指令. ls 的意义为 "list",也就是将某一个目录或是某一个档 ...