<!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. 虔诚的墓主人（bzoj 1227）

    Description 小W 是一片新造公墓的管理人.公墓可以看成一块N×M 的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地.当地的居民都是非常虔诚的基督徒,他们愿意提前为自己 ...

  2. iOS 错误之 NSObject 、CGFloat

    需要添加 #import <Foundation/Foundation.h> #import <UIKit/UIKit.h>

  3. delphi edit编辑框使用

    Delphi编辑框Edit的用法 http://wenku.baidu.com/link?url=oKKm0VFBXexqiWt9ZNB8WxFGzwjJqRBM3ohrAy6GSMmOmwIzSWP ...

  4. 随机矩阵（stochastic matrix）

          最近一个月来一直在看Google排序的核心算法---PageRank排序算法[1][2],在多篇论文中涉及到图论.马尔可夫链的相关性质说明与应用[3][4][5],而最为关键,一直让我迷惑 ...

  5. document.form.command.value

    问题:在一个JSP页面中需要多个提交按钮,每个按钮点击后需要把同一个form提交到不同的页面进行处理 解决:用JS. <html><head><title>一个表单 ...

  6. spring mvc redirect设置FlashAttribute

    在Controller中设置: @RequestMapping("/redir") public String redir(Model model, RedirectAttribu ...

  7. 《深度探索C++对象模型》笔记——Data语意学

    Data Member的绑定 inline member functin躯体之内的一个data member绑定操作会在整个class声明完成之后才发生. argument list中的名称还是会在它 ...

  8. MySQL锁详解

    一.概述 数据库锁定机制简单来说就是数据库为了保证数据的一致性而使各种共享资源在被并发访问访问变得有序所设计的一种规则.对于任何一种数据库来说都需要有相应的锁定机制,所以MySQL自然也不能例外.My ...

  9. GCD简介

    什么是GCD 全称是Grand Central Dispatch,可译为"牛逼的中枢调度器" 纯C语言,提供了非常多强大的函数   GCD的优势 GCD是苹果公司为多核的并行运算提 ...

  10. 使用python制作ArcGIS插件（4）界面交互

    使用python制作ArcGIS插件(4)界面交互 by 李远祥 插件界面部分,除了一开始在设计器中设计的这些界面元素之外,还可以与操作系统进行一些输入输出的交互,这部分的实现全部在pythonadd ...