<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

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

        <title>无标题文档</title>

        <style type="text/css">

            *{

                margin:0px;

                padding:0px;}

            #kuang{

                width:100%;

                height:400px;

                border:1px solid black;

                position:relative;}

            #choose{

                width:30%;

                height:400px;

                background-color:#0C6;

                position:relative;

                float:left;

                text-align:center;}

            #picture{

                width:60%;

                height:400px;

                background-color:#9C0;

                position:relative;

                float:right;}

            #choose ul li{

                background-color: silver;

                list-style-type: none;}

            #pic2,#pic3{

                display:none;}

        </style>

    </head>

    <body>

    <div id="kuang">

        <div id="choose">

            <ul>

                <li onmouseover="change('pic1',this)" onmouseout="change2(this)">AAA</li>

                <li onmouseover="change('pic2',this)" onmouseout="change2(this)">BBB</li>

                <li onmouseover="change('pic3',this)" onmouseout="change2(this)">CCC</li>

            </ul>

        </div>

        <div id="picture">

            <div id="pic1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

            <div id="pic2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>

            <div id="pic3">ccccccccccccccccccccccccccccc</div>

        </div>

    </div>

    </body>

</html>

<script type="text/javascript">

    function change(val,obj){

        obj.style.backgroundColor="#FFC12D";

        if(val=='pic1'){

            pic1.style.display='block';

            pic2.style.display='none';

            pic3.style.display='none';

            }else if(val=='pic2'){

            pic1.style.display='none';

            pic2.style.display='block';

            pic3.style.display='none';

            }else if(val=='pic3'){

            pic1.style.display='none';

            pic2.style.display='none';

            pic3.style.display='block';

            }

        }

    function change2(val){

        val.style.backgroundColor="silver";

        }

</script>

HTML中鼠标移动过去变换的更多相关文章

  1. VIM 中鼠标选择不选中行号

    VIM 中鼠标选择不选中行号 在Vim中,我们一般会使用 :set nu 打开行号开关. 但是打开行号后,有个弊端,那就是在用鼠标进行选择的时候,会将前面的行号也一起进行拷贝了.但是在gVim中进行选 ...

  2. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  3. (转)C# WinForm中 获得当前鼠标所在控件 或 将窗体中鼠标所在控件名显示在窗体标题上

    原文地址:http://www.cnblogs.com/08shiyan/archive/2011/04/14/2015758.html /********************** * 课题:将窗 ...

  4. NGUI中 鼠标划出屏幕后，停止对 UIDragScrollView 的 press

    using UnityEngine; /// <summary> /// NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press /// </summa ...

  5. 【GISER&&Painter】Chapter02：WebGL中的模型视图变换

    上一节我们提到了如何在一张画布上画一个简单几何图形,通过创建画布,获取WebGLRendering上下文,创建一个简单的着色器,然后将一些顶点数据绑定到gl的Buffer中,最后通过绑定buffer数 ...

  6. JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标

    分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量 第一步:求浏览器边框位置 x=e ...

  7. C#之在treeview中鼠标点击的所选的节点触发事件

    一.背景 如下图所示,我想实现通过鼠标点击treeview的根节点,然后在文本框控件中显示鼠标点击的节点号. 二.程序实现 因为是要通过鼠标点击才发生的事情,所以这属于一个事件,需要触发才行,刚开始不 ...

  8. Selenium WebDriver 中鼠标事件（全）

    Selenium WebDriver 中鼠标事件(全) 鼠标点击操作  鼠标点击事件有以下几种类型:  清单 1. 鼠标左键点击   Actions action = new Actions(driv ...

  9. C#-WinForm-如何获取文本框（TextBox）中鼠标，光标位置

    文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变 ...

随机推荐

  1. POST请求中参数以form data和request payload形式+清空数组方式

    测试与服务端ajax时用的dva封装的request方法,而后端怎么也拿不到参数.结果返现参数在request payload里. HTTP POST表单请求提交时:Content-Typeappli ...

  2. 谈谈字符集编码及gb2312、utf-8编码原理

    一.基础中的基础比特位即bit,是计算机最小的存储单位.以0或1来表示比特位的值.Byte是字节数,bit是位数,在计算机中每八位为一字节,也就是1Byte＝8bit:Byte和bit都翻译成比特,俗 ...

  3. iOS 日期时间控件

    UIDatePicker *picker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0, 0,[UIParam widthScreen] ,50 ...

  4. SpringMVC详解

    来源:Sunnier(http://www.admin10000.com/document/6436.html) 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入Spr ...

  5. 字符集 ISO-8859-1（2）

    HTML 支持的数学符号 结果 描述 实体名称 实体编号 ∀ for all ∀ ∀ ∂ part ∂ ∂ ∃ exists &exists; ∃ ∅ empty ∅ ∅ ∇ nabla ∇ ...

  6. 【BZOJ1552】[Cerc2007]robotic sort Splay

    [BZOJ1552][Cerc2007]robotic sort Description Input 输入共两行,第一行为一个整数N,N表示物品的个数,1<=N<=100000.第二行为N ...

  7. Struts2文件的上传

    一.单文件的上传  表单的enctype属性: application/x-www-form-urlencoded:默认的编码方式. multipart/form-data:会以二进制的方式处理表单数 ...

  8. 列表视图（ListView）和ListActivity

    ListView是手机系统中使用非常广泛的一种组件,它以垂直列表的形式显示所有列表项. 创建ListView有如下两种方式: 直接使用ListView进行创建. 让Activity继承ListActi ...

  9. Java线程：堵塞队列与堵塞栈

    一.堵塞队列 Java定义了堵塞队列的接口java.util.concurrent.BlockingQueue,堵塞队列是一个指定长度的队列,当试图向队列中添加元素而队列已满,或者是想从队列移出元素而 ...

  10. myeclipse 2014破解

    开始安装的时候已经进行了破解,不知道为什么还是会出现问题,按照下面说的才可以了: http://blog.sina.com.cn/s/blog_7f5862570101oxyv.html