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>
  • 相关阅读:
    js类数组
    内存中,外部碎片与内部碎片
    检测js随机函数是否随机
    Vue3 父子组件通信
    Promise的几个重要api
    npm知识总结
    vue中使用防抖函数
    absolute元素水平居中
    vue3 使用 data、computed、methods
    空白字符
  • 原文地址:https://www.cnblogs.com/wenwen123/p/5382451.html
Copyright © 2011-2022 走看看