<!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. Grunt那些事

    1.第一步当然是先安装好nodejs里面的npm包管理器咯,若还不知道怎么安装请参考nodejs那些事里面的安装步骤 2.node安装完后,就安装grunt-CLI,如果nodejs直接安装在系统默认 ...

  2. Android性能优化（一）之启动加速35%

    一.前言 随着项目版本的迭代,App的性能问题会逐渐暴露出来,而好的用户体验与性能表现紧密相关,从本篇文章开始,我将开启一个Android应用性能优化的专题,从理论到实战,从入门到深挖,手把手将性能优 ...

  3. 读【10问PHP程序员】 有感

    http://bbs.phpchina.com/thread-174331-1-1.html 看到前人的文章,总结自己的学习心得,颇有感悟,下面是自己的总结,平时就拿出来多问问自己.1.上了十几年的学 ...

  4. iOS 协议

    协议分为三部分:声明.引用.实现. 通常,声明协议和声明协议类型的属性都是在同一个类中.声明协议和声明协议作为属性在头文件中,引用在声明类的实现文件中.而实现协议则在其它类中.

  5. #DP# ----- OpenJudge数字组合

    OpenJudge 2985:数字组合 总时间限制:1000ms  内存限制: 65536kB 描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3, ...

  6. MVC使用HandleErrorAttribute自定义异常

    MVC中,有一个Filter可以捕捉错误,但是它的用法是利用Attribute来实现的,而且只能加在Controller和Action上,所以不能捕捉别出的错误 其实理论上所有的错误肯定产生于Cont ...

  7. 自动化测试框架中关于selenium api的二次封装

    不多说,直接看代码如下: #coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chai ...

  8. 【js 编程艺术】小制作三

    1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. web开发的性能准则（减少页面加载时间方面）

    准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...

  10. 蓝桥网试题 java 基础练习 特殊回文数

    ------------------------------------------------------------------------------------- 简单点,对话的方式简单点 有 ...