CSS样式表：

@charset "utf-8";

/* CSS Document */

.a

{

    width:80px;

    height:40px;

    top:200px;

    left:200px;

    background-color:#F00;

    position:absolute;

    overflow:hidden;

}

.b

{

    width:80px;

    height:120px;

    top:40px;

    left:0px;

    position:absolute;

}

.x

{

    width:80px;

    height:40px;

    top:0px;

    left:0px;

    background-color:#0F0;

    overflow:hidden;

    position:absolute;

}

.x1

{

    width:100px;

    height:160px;

    top:0px;

    left:80px;

    background-color:#0F0;

    position:absolute;

}

.y

{

    width:80px;

    height:40px;

    top:40px;

    left:0px;

    background-color:#00F;

    overflow:hidden;

    position:absolute;

}

.y1

{

    width:100px;

    height:160px;

    top:0px;

    left:80px;

    background-color:#00F;

    position:absolute;

}

.z

{

    width:80px;

    height:40px;

    top:80px;

    left:0px;

    background-color:#F0F;

    overflow:hidden;

    position:absolute;

}

.z1

{

    width:100px;

    height:160px;

    top:0px;

    left:80px;

    background-color:#F0F;

    position:absolute;

}

源代码：

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

<link href="Untitled-3的样式表.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="a" id="f1" onmouseover="h1()" onmouseout="h2()">

  <div class="b">

    <div class="x" id="f2" onmouseover="h3()" onmouseout="h4()">

       <div class="x1"></div>

    </div>

    <div class="y" id="f3" onmouseover="h5()" onmouseout="h6()">

       <div class="y1"></div>

    </div>

    <div class="z" id="f4" onmouseover="h7()" onmouseout="h8()">

       <div class="z1"></div>

    </div>

  </div>

</div>

</body>

</html>

<script>

function h1()

{

    document.getElementById("f1").style.overflow="visible";

}

function h2()

{

    document.getElementById("f1").style.overflow="hidden";

}

function h3()

{

    document.getElementById("f2").style.overflow="visible";

}

function h4()

{

    document.getElementById("f2").style.overflow="hidden";

}

function h5()

{

    document.getElementById("f3").style.overflow="visible";

}

function h6()

{

    document.getElementById("f3").style.overflow="hidden";

}

function h7()

{

    document.getElementById("f4").style.overflow="visible";

}

function h8()

{

    document.getElementById("f4").style.overflow="hidden";

}

</script>

效果图：

HTML鼠标悬浮显示隐藏 JS方法的更多相关文章

  1. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  2. 基于jquery封装通用的控制显示隐藏的方法

    应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...

  3. 移动端右侧导航 显示隐藏js

    transform与fixed影响 html按钮 <span class="nav-btn"></span> <span class="cl ...

  4. Selenium之当鼠标悬浮时隐藏的元素才出现

    在自动化过程中,有些导航按钮只有当鼠标悬浮在登录信息上时,它才能出现.这时候如果想要点击导航按钮直接用selenium的webDriver是无法定位的元素的,因为这些元素是隐藏的,只有鼠标悬浮时才出现 ...

  5. Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题

    场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...

  6. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  7. datagrid 列鼠标悬浮显示全部信息

    首次发表随笔,且是java新手,求不黑,可能在高手眼里好笑,嘿嘿1,样式设置超过字数限制显示省略号:<style type="text/css"> .datagrid- ...

  8. 使用react-tooltip实现鼠标悬浮显示框详细记录

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https://www.npmjs ...

  9. JS实现鼠标悬浮,显示内容

    其实就是增加title属性

随机推荐

  1. implicit和 explicit关键字

    implicit 关键字用于声明隐式的用户定义类型转换运算符. 如果可以确保转换过程不会造成数据丢失,则可使用该关键字在用户定义类型和其他类型之间进行隐式转换. class Digit { publi ...

  2. Android应用程序如何调用shell脚本（一）

    转自: Android应用程序如何调用shell脚本(一) 一般来说, Android 下的应用程序可以“直接”得到的最大的权限为 system ,但是如果我们需要在程序中执行某些需要 root 权限 ...

  3. Rect参数的简易理解方式

    以屏幕左上角为原点开始计算 向下 和 向右均为整数 new Rect(left, top, right, bottom) Rect参数的意思代表的是矩形的左上角的坐标(left.top)和右下角的坐标 ...

  4. JAVA面向对象编程课程设计——网络版单机斗地主

    一.团队介绍 成员姓名 任务分配 成员课程设计博客链接 兰泽祥(组长) 数据库,斗地主规则的实现,人机自动出牌的算法,实体类的设计 JAVA面向对象编程课程设计--web版斗地主 吴修恩 JSP界面的 ...

  5. 转！！！解释Eclipse下Tomcat项目部署路径问题(.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps)

    1.配置eclipse的开发环境,配置jdk的安装路径和tomcat安装路径. 2.在eclipse下建立Dynamic Web Project工程zhgy,在使用eclipse中new一个tomca ...

  6. 2018-2019 20165226 Exp5 MSF基础应用

    2018-2019 20165226 Exp5 MSF基础应用 目录 一.实验内容说明及基础问题回答 二.实验过程 Task1 主动攻击实践 ms08_067 ms17_010 Task2 针对浏览器 ...

  7. JAVA多线程创建与退出过程

    Java多个线程,什么时候被创建,什么时候退出? java程序的入口是什么? java主线程main结束后,是否程序就结束了?C中的(windows,linux)main函数执行完,整个进程结束,其子 ...

  8. [UE4]Selector和Sequence的区别

    Selector和Sequence子节点都是返回true才会执行下一个子节点. Sequence是从左到右依次执行,左边节点如果返回false,则不会执行右边的节点 Selector会同步执行所有子节 ...

  9. 学学Gearman

    通常,多语言多系统之间的集成是个大问题,一般来说,人们多半会采用WebService的方式来处理此类集成问题,但不管采用何种风格的WebService,如RPC风格,或者REST风格,其本身都有一定的 ...

  10. python程序里加入调试断点

    在需要打断的地方加入:import pdb;pdb.set_trace()即可 如: