<!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. 笔记整理--玩转robots协议

    玩转robots协议 -- 其他 -- IT技术博客大学习 -- 共学习 共进步! - Google Chrome (2013/7/14 20:24:07) 玩转robots协议 2013年2月8日北 ...

  2. Vue 响应式总结

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后getter.setter又失去了. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项 ...

  3. hdu 1005解题报告

    这道题目n的取值范围很大,1 <= n <= 100,000,000.因此肯定是需要优化才能AC. 首先我考虑到时是有没有通项公式,研究了一下,没发现什么东西,突然看到两个1时就想到会不会 ...

  4. netstat 查看连接数

    1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print ...

  5. centos 6.5下cmake工具的安装与配置

    一.cmake是什么? CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C+ ...

  6. 阿里云上给的防止跨站和xss攻击的代码

    文档说明: 1.将waf.php传到要包含的文件的目录 2.在页面中加入防护,有两种做法,根据情况二选一即可: a).在所需要防护的页面加入代码require_once('waf.php');就可以做 ...

  7. Java 伪静态 Mapping

    1. 概念 伪静态,简单来说是指转换url地址,在这里用来替换掉urlMapping.因为urlMapping需要为每一个页面都进行配置,非常麻烦. 2. RequestMapping 3. Spri ...

  8. 【翻译】使用Visual Studio在Azure上部署Asp.Net Core Web应用

    配置运行环境 Install the latest Azure SDK for Visual Studio. The SDK installs Visual Studio if you don't a ...

  9. Oracle Job 语法和时间间隔的设定（转）

    http://blog.itpub.net/27157/viewspace-425567/ 初始化相关参数job_queue_processesalter system set job_queue_p ...

  10. 告别被拒，如何提升iOS审核通过率（下篇）——应用内容检查大法与提审资源检查大法

    WeTest 导读 之前的<告别被拒,如何提升iOS审核通过率(上篇)>分享了客户端检查的相关要点,本篇会给大家介绍有关应用内容的检查项和提审资源相关检查项要点. 应用内容检查大法 苹果对 ...