<!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. 2017年WorkApplication牛客网线上机试题

    WorkApplication是一家日企,主要办公地在东京.新加坡.上海等地. 第一题:n的全排列中有多少个排列逆序数为k 输入两个数字n,k,两个数字的范围都是[1,1000]. 输出:n的全排列中 ...

  2. xml2-config not found.

    在Ubuntu下接着安装php时候,在configure后,又出现错误提示:error: xml2-config not found. Please check your libxml2 instal ...

  3. RMAN - 发现I/O瓶颈

    大多数操作系统支持异步I/O. 备份到磁盘,异步I/O是一个优势,因为一个服务器进程同时可以执行多个I/O操作:同步I/O必须等上一个I/O操作完成才可以执行下一个I/O操作. 初始化参数disk_a ...

  4. OAF_OAF Framework常用函数汇总（概念）

    2014-12-31 Created By BaoXinjian

  5. Nginx 的线程池与性能剖析【转载】

    正如我们所知,NGINX采用了异步.事件驱动的方法来处理连接.这种处理方式无需(像使用传统架构的服务器一样)为每个请求创建额外的专用进程或者线程,而是在一个工作进程中处理多个连接和请求.为此,NGIN ...

  6. Creating the Help Page in ASP.NET Web API

    Introduction In this article we will define the process of creating the help page in the ASP .NET We ...

  7. oracle ORA-00119和ORA-00132解决方法

    ORA-00119 ORA-00132解决方法. 思路:*.local_listener错误导致.要*.local_listener就要修改spfile文件,因为oracle默认是以spfile文件启 ...

  8. springmvc+spring+mybatis+maven项目构建

    1.首先在myeclipse10中安装maven的插件,将插件放入D:\Program Files (x86)\myEclipse10\MyEclipse Blue Edition 10\dropin ...

  9. [Jobdu] 题目1499：项目安排

    题目描述: 小明每天都在开源社区上做项目,假设每天他都有很多项目可以选,其中每个项目都有一个开始时间和截止时间,假设做完每个项目后,拿到报酬都是不同的.由于小明马上就要硕士毕业了,面临着买房.买车.给 ...

  10. TCP通信的三次握手和四次撒手的详细流程（顿悟）

    TCP(Transmission Control Protocol) 传输控制协议 三次握手 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位 ...