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. WHEN STATICFILEHANDLER IS NOT STATICFILEHANDLER

    I could also have called this "wildcard .NET mapping in IIS Express from web.config." I'm ...

  2. python 笔记 2017

    26.反斜杠用处,断言一些字符包含特殊字符的 if "<h3 class=\"entH 22222setH\">刷新成功</h3>" i ...

  3. 杂项-ORM：LinqToSQL

    ylbtech-杂项-ORM:LinqToSQL LINQ TO SQL 是包含在.NET Framework 3.5 版中的一种 O/RM 组件(对象关系映射),O/RM 允许你使用 .NET 的类 ...

  4. JVM的DirectMemory设置

    转载http://blog.csdn.net/zshake/article/details/46785469 几台服务器的JVM占用内存总是持续增长,大大超过-Xmx设定的值,服务器物理内存几乎被耗尽 ...

  5. MariaDB管理系统

    MariaDB管理系统 [root@c4kaichen@163 ~]# yum install mariadb[root@c4kaichen@163 ~]# yum install -y mariad ...

  6. [UE4]组件

    用来组成Actor的子对象,Actor是由组件组成的. 几个关键的Component类型: 一.UActorComponent 这个Component的基类,可以被放到Actor里面, 可以接受Tic ...

  7. git log --author详解，这个是个模糊匹配

    git log --author=authorname --author=<pattern>, commits whose author matches any of the given ...

  8. 【基础知识五】神经网络NN

    常用模型:BP神经网络,RBF神经网络 一.神经元模型 |  连接权,阈值,激活函数 1. 输入信号通过带权重的连接(connection)进行传递,神经元接收到的总输入值将与神经元的阈值进行比较, ...

  9. 管理11gRAC基本命令 (转载)

    在 Oracle Clusterware 11g 第 2 版 (11.2) 中,有许多子程序和命令已不再使用:    crs_stat    crs_register    crs_unregiste ...

  10. 单元测试工具NUnit的使用

      使用 NUnit 工具来进行单元测试 首先在要创建一个单元测试的项目,通常在原有的解决方案中添加新项目, 在弹出的项目类型中选择单元测试,项目的命名一般情况下与解决方案的名称相同后加UnitTes ...