<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. RBM如何训练？

    RBM(Restricted Boltzman Machine,受限玻尔兹曼机)是深度学习的基础,虽然原理比较简单,但实际训练中用到了很多trick,在参考文献中,Hinton为我们披露了几个训练的细 ...

  2. 微信公众号接口配置验证URL

    /** * 审核填写的URL */ public function checkUrl(){ //获得参数 signature nonce token timestamp echostr $nonce ...

  3. c++运行时函数

    函数 包含 类别 功能 _atold math.h 数学子程序 把字符串转换成浮点数 _beginthread process.h 进程控制子程序 启动执行一个新线程 _bios_disk bios. ...

  4. Loadrunner 11在win7录制中失败“the recording of the application was terminated by windows due to window data execution prevention feature"

    在录制过程中遇到如下问题: 查了下如何Enable, Disable Data Execution Prevention (DEP) in Windows 10/8/7 (http://www.the ...

  5. python web开发-flask读取txt文件内容

    某些情况下,需要读取flask网站要目录下的txt文件.但是直接在flask网站的目录下创建一个文件是无法访问的.从网站找了一些资料,最终发现通过写一个方法返回txt内容比较简单方便,不过此方法适用于 ...

  6. 在 Scale Up 中使用 Health Check - 每天5分钟玩转 Docker 容器技术（145）

    对于多副本应用,当执行 Scale Up 操作时,新副本会作为 backend 被添加到 Service 的负责均衡中,与已有副本一起处理客户的请求.考虑到应用启动通常都需要一个准备阶段,比如加载缓存 ...

  7. 剑指Offer-把二叉树打印成多行

    package Tree; import java.util.ArrayList; import java.util.LinkedList; import java.util.Queue; /** * ...

  8. UWP：可滚动的PivotHeader

    UWP开发里,Pivot真是个令人又爱又恨的控件.为了实现某些可滚动Header的效果,有些大佬甚至去掉了原本的Header,使用一个ListView或者ListBox自己画Header,不过这样会让 ...

  9. 研华ADAM 6000系列型号枚举值

    public enum Adam6000Type    {        Non = 0,        Adam6015 = 6015,        Adam6017 = 6017,        ...

  10. javascript里的循环语句

    前序:我一直对于for跟for..in存在一种误解,我觉得for都能把事情都做了,为啥还要for...in...这玩意了,有啥用,所以今天就说说JavaScript里的循环语句. 循环 要计算1+2+ ...