zoukankan      html  css  js  c++  java
  • HTML鼠标悬浮显示隐藏 JS方法

    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>

    效果图:

  • 相关阅读:
    根据表生成接收(zml)
    删除指定日期,指定设备的排产记录(zml)
    1029 Median
    1027 Colors in Mars (20 分)进制转换
    1028 List Sorting 排序
    1025 PAT Ranking
    1024 Palindromic Number(大数加法)
    1023 Have Fun with Numbers
    1022 Digital Library
    逆序打印乘法表
  • 原文地址:https://www.cnblogs.com/zyg316/p/5532835.html
Copyright © 2011-2022 走看看