鼠标经过展开对应内容

<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>

 

转载于:https://www.cnblogs.com/wenwen123/p/5382451.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值