<!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. Twisted源码分析系列01-reactor

    转载自:http://www.jianshu.com/p/26ae331b09b0 简介 Twisted是用Python实现的事件驱动的网络框架. 如果想看教程的话,我觉得写得最好的就是Twisted ...

  2. instanceof typeof

    //清单 6. JavaScript instanceof 运算符代码 function instance_of(L, R) {//L 表示左表达式,R 表示右表达式 var O = R.protot ...

  3. iOS 设置控件圆角、文字、字体

    以按钮为例: UIButton btn = [UIButton new]; btn.layer.masksToBounds = YES; btn.layer.cornerRadius = 10.0; ...

  4. eclipse 标签标题乱码解决方法

    一般出现此类问题都是由于更改本地语言设置引起的. 解决办法: 1.恢复到原来默认的语言和地域 2.更改eclipse主题(Window-->preferences-->General--& ...

  5. 2.4. 属性（Core Data 应用程序实践指南）

    属性的名称必须以小写字母开头. 添加 name 和 quantity 属性.

  6. AngularJs ui-router 路由的介绍

    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...

  7. GCD教程（二）：多核心的性能

    接上一篇,原帖地址:http://www.dreamingwish.com/dream-2012/of-of-of-performance-of-of-of-of-of-of-of-gcd-intro ...

  8. CSS 文本、字体、链接

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...

  9. validform表单验证插件最终版

    做个笔记,以后直接用吧. 报名界面: <%@ page language="java" pageEncoding="UTF-8" contentType= ...

  10. 在Winfrom下实现类似百度、Google搜索自能提示功能

    前记:数据源来自页面的一个ComboBox的数据源List<Contract>集合 页面放置一个TextBox(搜索框).ListBox(显示搜索出来的数据),ListBox位置位于Tex ...