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. hello word 应用程序的编写

    1.各类文件的书写 src中的文件: hello文件夹中的Makefile文件 # # Copyright (C) - OpenWrt.org # # This is free software, l ...

  2. Densenet 相关

    https://github.com/flyyufelix/DenseNet-Keras

  3. Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册

    头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...

  4. 解决EF一对一或多对一的删除

    people 类中有 zhengshu类 且是一对一,现在要删除people类中的zhengshu 网上看了N多办法,什么更新外键什么滴. 其实方法简单极了 using (KJExamEntity c ...

  5. mysql联表查询

    2.1 内连接 select a.*,b.* FROM  a INNER join  b  ON a.id = b.id;  查出所有 或者 select a.*,b.* FROM a join b ...

  6. CMSIS DSP Lib：RFFT函数的bug

    调用arm_rfft_fast_init_f32之后,还有两个成员需要初始化: arm_rfft_fast_instance_f32::pTwiddleRFFT = twiddleCoef_rfft_ ...

  7. Windows 8的用户模式Shim Engine小探及利用

    转载: https://bbs.pediy.com/thread-175483.htm Windows Shim Engine,即Windows 兼容性模式实现引擎,在exe文件的属性对话框中有一个兼 ...

  8. [UE4] C++实现Delegate Event实例(例子、example、sample)

    转自:http://aigo.iteye.com/blog/2301010 虽然官方doc上说Event的Binding方式跟Multi-Cast用法完全一样,Multi-Cast论坛上也有很多例子, ...

  9. laravel 5.3 ——路由（资源，别名）

    laravel的路由定义中,其中route:resoure(),可以直接定义类似restful风格的URL 例如:Route::resource('system/role','System\RoleC ...

  10. Hive基础之Hive的存储类型

    Hive常用的存储类型有: 1.TextFile: Hive默认的存储类型:文件大占用空间大,未压缩,查询慢: 2.Sequence File:将属于以<KEY,VALUE>的形式序列化到 ...