鼠标点击隐藏层出现

用户头像
广州/网页设计师/11年前/239浏览
鼠标点击隐藏层出现
用户头像
Licey_U

鼠标点击隐藏层出现



<style>
*{ font-size:12px; margin:0; padding:0;}
ul, li {list-style: none outside none;}
.clear{line-height:0px;height:0px;clear:both;font-size:0px;overflow:hidden;}
.lchfrr-box{ width:236px; height:50px; background:#f1f1f1; padding:10px 10px 0; margin:0 auto;}
.lchfrr-box dl{ float:left; display:inline; overflow:hidden;}
.lchfrr-box dl dt{width:60px;height:40px; line-height:40px; font-size:12px;font-weight:bold; color:#999; text-align:right; background:#FF9;float:left}
.lchfrr-box dl dd{width:168px;height:30px;padding-left:8px; padding-top:8px; background:#3FF;float:left}
.lchfrbox-labe{ width:150px; height:25px; line-height:25px; border:1px solid #ccc;padding-left:6px;float:left;}
.lchfrbox-svhid{float:left; display:none}
.lchfrbox-svhid .rbox{ position:absolute; z-index:34;left:50%; margin-left:-50px;margin-top:24px;}
.lchfrbox-svhid .rbox .rboxiframe{width:148px; height:120px;background:#fff;z-index:-1}
.lchfrbox-svhid .rbox .rtb{ width:148px; height:auto;border:1px solid #ccc; background:#FFF;-webkit-box-shadow: 3px 3px 10px #ccc;box-shadow: 3px 3px 10px #ccc;position:absolute; z-index:35;top: 0;left: 0;}
.lchfrbox-svhid .rbox .rtb a{width:143px; height:25px; line-height:25px; color:#333; text-decoration:none; padding-left:5px;float:left; overflow:hidden}
.lchfrbox-svhid .rbox .rtb a:hover{ color:#fff; background:#3399ff;}
</style>
<div class="lchfrr-box">
    <dl>
        <dt>理财期限</dt>
        <dd>
            <div class="lchfrbox-labe" onmousedown="document.getElementById('homeissl1').style.display='block';">不限</div>
            <!--隐藏层 s-->
            <div class="lchfrbox-svhid" id="homeissl1" >
                <div class="rbox">
                    <iframe class="rboxiframe" frameborder="0"></iframe>
                    <div class="rtb" onmouseenter="document.getElementById('homeissl1').style.display='block';" onmouseleave="document.getElementById('homeissl1').style.display='none';">
                        <a href="#">1个月内</a>
                        <a href="#">1-3个月</a>
                        <a href="#">3-6个月</a>
                        <a href="#">6-12个月</a>                     
                        <a href="#">1年以上</a>
                        <div class="clear"></div>
                    </div>                                    
                </div>                          
            </div>
        </dd>
    </dl>
</div>

1
举报
|
1
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
课程海报,平面素材
金色颗粒质地的平面
城阙凡花
牛奶乳液层次平面平铺平面
玄关入门地毯印花图案红地毯
空的平台平面和自然景观
牛奶乳液层次梯田平铺平面
平面风格黄绿色系花朵装饰
“知识宅急送”外卖,快递,平面,海报,素材,教育
古风平面仕女与瓷器
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
学习,优惠券,平面,海报
平面书法字手写
平面插画情侣/矢量
金色颗粒质地的平面
平面花卉图案扁平简约无缝拼接插画
金色颗粒质地的平面
倒计时,海报,平面
平面插画设计女孩喝咖啡
中国传统纹样创新图案设计
空的平台平面和自然景观
金色颗粒质地的平面
海底世界插画
平面男孩喝咖啡插画设计
你可能喜欢
大家都在看
登录注册