<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. ES2015 类 class 语法

    在ES2015之前,定义类的方法只能通过原型链来模拟 function Animal(family,species) { this.family = family; this.species = sp ...

  2. ASP.NET没有魔法——ASP.NET MVC界面美化及使用Bundle完成静态资源管理

    对于一个应用来说界面的重要性无言而喻,而Web应用的界面是使用Html+Css以及Javascript实现的,ASP.NET MVC是一个用来构建Web应用的框架,它的界面也是Html实现的,对于一些 ...

  3. iOS刚进入后台接受推送、打开推送调转到相应的界面

    刚进入后台的时候消息处理时候我用了本地推送!可以看我前边写的博客,怎么处理刚进入后台接收推送的案例,链接 /** 注释:打开推送的三种方式:-peter 1.apns的时候,结束进程退出后台:启动的时 ...

  4. 使用.NET Core快速开发一个较正规的命令行应用程序

    程序员的世界,命令行工具一直是"体验非常友好"的工具,也能自动化完成很多事情,同时还能结合shell来进行某项任务的批处理(脚本).在.NET Core中,命令行应用程序是基础,但 ...

  5. Linux乱码问题解决

    语言设置常用命令 # echo $LANG # locale # LANG=zh_CN.UTF-8 # LANG=en   Centos6中文语言包的设置 安装CentOS时选择了中文,但在终端不能显 ...

  6. Keeweb-Linux的密码管理器

    Keeweb-Linux的密码管理器 如今,我们依赖于越来越多的线上服务.我们每注册一个线上服务,就要设置一个密码:如此,我们就不得不记住数以百计的密码.这样对于每个人来说,都很容易忘记密码.那么,下 ...

  7. 使用git将本地代码传到github

    方法可能有些小小的差别,但是最终的结果都是一样的 在github上新建代码仓库 确定之后会显示一个仓库的url,复制下来 在本地找一个作为本地仓库的文件夹右键Git Bash Here打开git 把g ...

  8. MyBatis动态SQL小结

    6:用于实现动态sql的元素及其用法 if+set--完成更新操作 if+where --完成多条件查询 if+完成多条件查询(替代where)或完成更新操作(替代set) choose(when,o ...

  9. 基于hi-nginx的web开发（python篇）——使用jinja2模板引擎

    模板引擎的使用在web开发中是不可避免和必要的.hi.py框架使用jinja2作为模板引擎. 为了使用hi.py提供的jinja2引擎,首先需要引入它: from hi import hi,templ ...

  10. NodeJS定时任务

    在实际开发项目中,会遇到很多定时任务的工作.比如:定时导出某些数据.定时发送消息或邮件给用户.定时备份什么类型的文件等等 一般可以写个定时器,来完成相应的需求,在node.js中自已实现也非常容易,接 ...