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. 【python】class之类的内建函数

  2. ios之block笔记

    目测和函数指针基本类似用法,贴个hello world,备用 typedef int (^TestBlock)(int val1,int val2); __block ;//这里加__block是为了 ...

  3. java 字符串String

    在 Java 中,字符串被作为 String 类型的对象处理. String 类位于 java.lang 包中.默认情况下,该包被自动导入所有的程序. 创建 String 对象的方法: 只要是双引号标 ...

  4. Android自动化测试中AccessibilityService获取控件信息（1）

    Android自动化测试中AccessibilityService获取控件信息(1) 分类: android自动化测试2014-03-24 15:31 3455人阅读 评论(16) 收藏 举报 and ...

  5. BASIC-1_蓝桥杯_闰年判断

    正确代码: #include <stdio.h> int main(void){ int year = 0 ; scanf("%d",&year); if (y ...

  6. 常用的sql语句（存储过程语法）

    1.存储过程语法 ①package create or replace package PKG_RPT_WAREHOUSE is -- Author : -- Created : 2018/9/28 ...

  7. TraceLog.cs 累积 C#

    using System; using System.Collections.Generic; using System.Text; using System.IO; using System.Dia ...

  8. CSS 标签实例二

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery 的noConflict()的使用.

    我们项目现在需要用到两个js库.一个是jQuery库,还有一个是我们自己开发的轻量级的gys.js库. 而gys库对外提供的接口也是$符号.和jQuery库是一样的,这个时候,两个库就会发生冲突了,我 ...

  10. 由一条普通的link引用引发的无数问号,大家能回答的帮忙回答回答吧.

    <link type="text/css" rel="stylesheet" href="1.css" /> 对于前台工作者来说 ...