zoukankan      html  css  js  c++  java
  • HTML 鼠标悬浮隐藏部分 习题

    css样式表:

    @charset "utf-8";
    /* CSS Document */
    .a
    {
        width:80px;
        height:40px;
        background-color:#00F;
        top:200px;
        left:200px;
        overflow:hidden;
        position:absolute;
    }
    .aa
    {
        width:80px;
        height:40px;
        background-color:#00F;
        top:200px;
        left:200px;
        position:absolute;
    }
    .b
    {
        width:80px;
        height:120px;
        border:0px solid #999;
        top:40px;
        left:0px;
        position:absolute;
    }
    .c
    {
        width:80px;
        height:40px;
        background-color:#F00;
        top:0px;
        left:0px;
        overflow:hidden;
        position:absolute;
    }
    .c1
    {
        width:80px;
        height:40px;
        background-color:#F00;
        top:0px;
        left:0px;
        position:absolute;
    }
    .c2
    {
        width:100px;
        height:160px;
        background-color:#F00;
        top:0px;
        left:80px;
        position:absolute;
    }
    
    
    .d
    {
        width:80px;
        height:40px;
        background-color:#FF0;
        top:40px;
        left:0px;
        overflow:hidden;
        position:absolute;
    }
    .d1
    {
        width:80px;
        height:40px;
        background-color:#FF0;
        top:40px;
        left:0px;
        position:absolute;
    }
    .d2
    {
        width:100px;
        height:160px;
        background-color:#FF0;
        top:0px;
        left:80px;
        position:absolute;
    }
    .e
    {
        width:80px;
        height:40px;
        background-color:#F0F;
        top:80px;
        left:0px;
        overflow:hidden;
        position:absolute;
    }
    .e1
    {
        width:80px;
        height:40px;
        background-color:#F0F;
        top:80px;
        left:0px;
        position:absolute;
    }
    .e2
    {
        width:100px;
        height:160px;
        background-color:#F0F;
        top:0px;
        left:80px;
        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-2.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="a" onmouseover="className='aa'" onmouseout="className='a'">
    <div class="b">
    <div class="c" onmouseover="className='c1'" onmouseout="className='c'">
    <a href="http://www.baidu.com/" target="_blank"><div class="c2">百度一下</div></a>
    </div>
    <div class="d" onmouseover="className='d1'" onmouseout="className='d'">
    <div class="d2"></div>
    </div>
    <div class="e" onmouseover="className='e1'" onmouseout="className='e'">
    <div class="e2"></div>
    </div>
    </div>
    </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    JS 定义函数的参数的个数,传入参数的个数对调用的影响
    jQuery常见操作总结
    jQuery hover事件
    Ajax实现登陆并友好提示错误信息
    JS实现弹出登录框
    .NET源码 SortedSet(红黑树)
    C#链接SQL Server数据库
    628. Maximum Product of Three Numbers 最大的三个数的乘积
    501. Find Mode in Binary Search Tree 找二叉搜索树的众数
    235. Lowest Common Ancestor of a Binary Search Tree 二叉搜索树的LCA
  • 原文地址:https://www.cnblogs.com/zyg316/p/5532807.html
Copyright © 2011-2022 走看看