zoukankan      html  css  js  c++  java
  • 鼠标经过展开对应内容

    <style>
    *
    {
        margin:0px;
        padding:0px;}
    .aa
    {
        top: 120px;
        left: 120px;
        height: 40px;
        width: 80px;
        position: absolute;
        overflow: hidden;
        line-height: 40px;
        text-align: center;
        background-color: #333;
        }
    .aaa
    {
        top:120px;
        left:120px;
        height:40px;
        width:80px;
        position:absolute;
        overflow:visible;
        line-height:40px;
        text-align:center;
        background-color:#F00;
        }
    .b
    {
        height:40px;
        width:80px;
        top:40px;
        left:0px;
        position:absolute;
        overflow:hidden;
        background-color:#666;
        }
    .bb
    {
        height:40px;
        width:80px;
        top:40px;
        left:0px;
        position:absolute;
        overflow:visible;
        background-color:#FF6;
        }    
    .c
    {
        height:40px;
        width:80px;
        top:80px;
        left:0px;
        position:absolute;
        overflow:hidden;
        background-color:#999;
        }
    .cc
    {
        height:40px;
        width:80px;
        top:80px;
        left:0px;
        position:absolute;
        overflow:visible;
        background-color:#FF9;    
        }    
        .d
    {
        height:40px;
        width:80px;
        top:120px;
        left:0px;
        position:absolute;
        overflow:hidden;
        background-color:#CCC;
        }
    .dd
    {
        height:40px;
        width:80px;
        top:120px;
        left:0px;
        position:absolute;
        overflow:visible;
        background-color:#FFC;
        }    
    .e
    {
        height:110px;
        width:90px;
        top:0px;
        left:80px;
        position:absolute;
        background-color:#C3C;
        }    
        
    </style>
    </head>
    
    <body>
    <div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'"><font color="#FFFFFF">新闻动态</font>
    <div class="b" onmouseover="this.className='bb'" onmouseout="this.className='b'">场景<div class="e"></div></div>
    <div class="c" onmouseover="this.className='cc'" onmouseout="this.className='c'">活动<div class="e"></div></div>
    <div class="d" onmouseover="this.className='dd'" onmouseout="this.className='d'">杂谈<div class="e"></div></div>
    
    </div>
    
    
    
    </body>
  • 相关阅读:
    Linux crontab定时执行任务 命令格式与详细例子
    git的color configura
    Linux不用使用软件把纯文本文档转换成PDF文件的方法
    linux sar命令详细说明相关参数
    linux下sar tool command note
    Linux see 网卡当前流量
    安装调试Installing Odoo
    寻找[nginx] 由Lua 粘合的Nginx生态环境-- agentzh
    git检查与放弃本地的代码修改情况
    发现linux shell中$0,$?,$!等的特殊用法
  • 原文地址:https://www.cnblogs.com/wenwen123/p/5382451.html
Copyright © 2011-2022 走看看