<!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;

    }

#aa

{

    background-color:#FF0;

    height: 40px;

    width: 100px;

    top: 60px;

    left: 100px;

    position: absolute;

    overflow: hidden;

    text-align: center;

    line-height:40px;

    }

#bb{

    height:120px;

    width:100px;

    top:40px;

    left:0px;

    position:absolute;

    }

table{

    height:120px;

    width:100px;

    text-align:center;

    vertical-align:middle;

}

#tiyu

{

    height:40px;

    width:100px;

    position:absolute;

    overflow:hidden;

    left:0px;

    top:0px;

    }

#zuqiu

{

    height:40px;

    width:100px;

    position:absolute;

    left:100px;

    top:0px;

    background-color:#C63;

    }

#yule

{

    height:40px;

    width:100px;

    position:absolute;

    overflow:hidden;

    left:0px;

    top:40px;

    }

#bagua

{

    height:40px;

    width:100px;

    position:absolute;

    left:100px;

    top:0px;

    background-color:#C63;

    }

#guoji

{

    height:40px;

    width:100px;

    position:absolute;

    overflow:hidden;

    left:0px;

    top:80px;

    }

#junshi

{

    height:40px;

    width:100px;

    position:absolute;

    left:100px;

    top:0px;

    background-color:#C63;

    }

</style>

</head>

<body>

<div id="aa" onmousemove="over()" onmouseout="out()">新闻动态

<div id="bb">

<table cellpadding="0" cellspacing="0">

<tr bgcolor="#0000FF">

<td height="40" width="100"><div id="tiyu" onmouseover="over1()" onmouseout="out1()">体育<div id="zuqiu">足球</div></div></td>

</tr>

<tr bgcolor="#FFFF00">

<td height="40" width="100"><div id="yule" onmousemove="over2()" onmouseout="out2()">娱乐<div id="bagua">八卦</div></div></td>

</tr>

<tr bgcolor="#00FFFF">

<td height="40" width="100"><div id="guoji" onmouseover="over3()" onmouseout="out3()">国际新闻<div id="junshi">军事</div></div></td>

</tr>

</table>

</div></div>

</body>

</html>

<script>

function over()

{

    var a=document.getElementById("aa")

    a.setAttribute("style","overflow:visible;background-color:red");

    }

function out()

{

    var a=document.getElementById("aa")

    a.setAttribute("style","overflow:hidden:background-color:green"

);    }

function over1()

{

    var a=document.getElementById("tiyu")

    a.setAttribute("style","overflow:visible;background-color:red");

    }

function out1()

{

    var a=document.getElementById("tiyu")

    a.setAttribute("style","overflow:hidden:background-color:green"

);    }

function over2()

{

    var a=document.getElementById("yule")

    a.setAttribute("style","overflow:visible;background-color:red");

    }

function out2()

{

    var a=document.getElementById("yule")

    a.setAttribute("style","overflow:hidden:background-color:green"

);    }

function over3()

{

    var a=document.getElementById("guoji")

    a.setAttribute("style","overflow:visible;background-color:red");

    }

function out3()

{

    var a=document.getElementById("guoji")

    a.setAttribute("style","overflow:hidden:background-color:green"

);    }

</script>

结果：

默认时：

鼠标在新闻动态上面时：

鼠标在体育上面时：

鼠标在娱乐上面时：

鼠标在国际新闻上面时

JavaScrip——练习(做悬浮框进一步：悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)的更多相关文章

  1. JavaScrip——练习(做悬浮框再进一步：悬浮窗后缀悬浮窗——用this.className)

    对悬浮窗进一步改进: 用this.className 可以省略script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  2. JavaScrip——练习(做悬浮框)

    通过HTML.CSS.JSP来实现 1.首先确定通过div嵌套来实现: 大的div里放默认显示的一层,限制其总层次高,设置超出部分隐藏 小的div里放鼠标移过去时显示的一层:3行1列的表格 1.1.什 ...

  3. Android悬浮框，在Service中打开悬浮窗；在Service中打开Dialog；

    文章介绍了如何在Service中显示悬浮框,在Service中弹出Dialog,在Service中做耗时的轮询操作: 背景需求: 公司的项目现在的逻辑是这样的:发送一个指令,然后3秒一次轮询去查询这个 ...

  4. Android音视频通话过程中最小化成悬浮框的实现（类似Android8.0画中画效果）

    关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方 ...

  5. 小米Adnroid默认禁止悬浮框的使用，导致开发的悬浮框无法接收事件

    比如你建了一个悬浮框: WindowManager windowManager = getWindowManager(context); int screenWidth = windowManager ...

  6. Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

    问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...

  7. C# 鼠标悬停在datagridview的某单元格，显示悬浮框效果

    今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...

  8. Android -- 使用WindowManager实现悬浮框效果

    1,原文在这里http://blog.csdn.net/qq_17250009/article/details/52908791,我只是把里面的关键步骤给注释了一下,首先来看一下我们的效果,如图(电脑 ...

  9. 菜鸟学JS（三）——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

随机推荐

  1. Html5 Geolocation获取地理位置信息(转)

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  2. Android学习系列(18)--App工程结构搭建

     本文算是一篇漫谈,谈一谈关于Android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构.      关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的 ...

  3. MongoDB Windows环境安装及配置[转]

    MongoDB一般安装 1.首先到官网(http://www.mongodb.org/downloads )下载合适的安装包,目前的最新版本为2.6 安装包有zip和msi格式的,这里推荐下载zip格 ...

  4. python学习笔记——线程threading （一）

    1 线程threading 1.1 基本概述 也被称为轻量级的进程. 线程是计算机多任务编程的一种方式,可以使用计算机的多核资源. 线程死应用程序中工作的最小单元 1.2 线程特点 (1)进程的创建开 ...

  5. JMeter学习笔记---作用域规则

    JMeter测试树中既包含遵循分层规则的测试元件(监听器.配置元件.后置处理器.前置处理器.断言.定时器),又包含遵循顺序规则的测试元件(逻辑控制器.采样器),测试人员创建测试计划的同时,实际上就创建 ...

  6. PO_标准内部请购内部采购单抛转订单模组（流程）

    2014-06-03 Created By BaoXinjian

  7. Spark Core Runtime分析: DAGScheduler, TaskScheduler, SchedulerBackend

    Spark Runtime里的主要层次分析,梳理Runtime组件和运行流程, DAGScheduler Job=多个stage,Stage=多个同种task, Task分为ShuffleMapTas ...

  8. [转]玩转UltraEdit，UE常见快捷键操作

    编辑器Ultraedit快捷键说到编辑器的快捷键,VIM是无与伦比的.要反对,也得是带脚踏板的EmaCS.UE还是有差距的,很大差距.注意:VIM是开源.免费的,而UE则需要注册.UE是Windows ...

  9. 【JEECG_3.7.1】列表多表头的设计

    先看下多表头的设计: 在这个多表头的表单当中,我们可以按照从上到下和从左往右的划分方式,将表头划分成三行十列,分别是: 列表标签 人员信息.部门信息.工资.入职状态.创建日期.操作 名称.年龄.性别. ...

  10. cocos2d-x开发记录：二，基本概念（骨骼动画）

    九,骨骼动画 1.骨骼动画vs Sprite sheets 你能使用sprite sheets 创建动画,它很快又容易.直到你意识到你的游戏需要大量的动画并且内存消耗越来越高,并且需要时间载入全部数据 ...