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. R(6): 数据处理包dplyr

    dplyr包是Hadley Wickham的新作,主要用于数据清洗和整理,该包专注dataframe数据格式,从而大幅提高了数据处理速度,并且提供了与其它数据库的接口,本节学习dplyr包函数基本用法 ...

  2. php如何分割字符串?php mb_substr分割字条串,解决中文乱码问题,支持分割中文! (转)

    因为网站开发需要,必须有一项功能可以把字符串一个一个分割开来,并且转换为数组. 刚开始用“str_split函数”在实验分割中文字符时就出现了乱码. 蚂蚁学院经过一翻研究,最终发现以下方法可以有效分割 ...

  3. 大数据挖掘算法篇之K-Means实例

    一.引言 K-Means算法是聚类算法中,应用最为广泛的一种.本文基于欧几里得距离公式:d = sqrt((x1-x2)^+(y1-y2)^)计算二维向量间的距离,作为聚类划分的依据,输入数据为二维数 ...

  4. PHP include 和 require 语句 (调用其他php文件进来的方法)

    PHP include 和 require 语句通过 include 或 require 语句,可以将 PHP 文件的内容插入另一个 PHP 文件(在服务器执行它之前). require 会生成致命错 ...

  5. MySQL优化技巧之四：mysql数据库开发常见问题及优化[转]

    mysql 数据库是被广泛应用的关系型数据库,其体积小.支持多处理器.开源并免费的特性使其在 Internet 中小型网站中的使用率尤其高.在使用 mysql 的过程中不规范的 SQL 编写.非最优的 ...

  6. [转]修改DLL

    部分内容来自:http://blog.csdn.net/csdncshuan/article/details/51477705 为没有源码的DLL文件添加强名称 如果项目中引用了其他没有源码的dll文 ...

  7. python 之 决策树分类算法

    发现帮助新手入门机器学习的一篇好文,首先感谢博主!:用Python开始机器学习(2:决策树分类算法) J. Ross Quinlan在1975提出将信息熵的概念引入决策树的构建,这就是鼎鼎大名的ID3 ...

  8. [UE4]C++创建对象的三种方式

    #include <iostream> using namespace std; class A { private: int n; public: A(int m):n(m) { } ~ ...

  9. 用HTML5播放IPCamera视频

    HTML5增加了vedio标签,能直接播放视频,但是播放的格式是有限的. 这里将IPCamera的视频转换OGG格式,再通过HTML5网页播放,播放还是很清晰的.IPCamera要支持RTSP等视频流 ...

  10. tensorflow入门资料

    google出的说明文档 tensorflow_manual_cn.pdf google出的视频 https://www.zhihu.com/question/41667903/answer/1306 ...