鼠标移至div处，展示列表

1. 效果图  鼠标移至我要注册 显示个人注册和企业注册，点击个人注册跳转到个人注册，点击企业注册跳转到企业注册

   

2.源代码

  

 <script src="jquery-1.8.0.min.js" language="javascript"></script>
<script>
$(function(){
        $(".yun_topLogin").hover(function(){
                $(this).find(".yun_More").attr("class","yun_More yun_Morecurrent");
                $(this).find("ul").show();
                //alert("aaa");
            },function(){
                $(this).find(".yun_More").attr("class","yun_More");
                $(this).find("ul").hide();
                //alert("bbb");
            });
});
 
</script>
<style>
.yun_topLogin {
    display: inline;
    float: left;
    height: 35px;
    line-height: 35px;
    position: relative;
    text-align: center;
    width: 80px;
}
.yun_Moredown {
    border: 1px solid #ccc;
    border-top: none;
    left: 0;
    position: absolute;
    top: 20px;
    z-index: 12;
    background: #000;
}
.yun_Moredown li {
    float: left;
    line-height: 28px;
    text-align: center;
    width: 78px;
}
.yun_Moredown li a {
    color: #666666;
}
.yun_topLogin a.yun_Morecurrent { background:  63px 15px #FFFFFF; border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;padding-left: 9px; width: 69px;}
</style>
<div class="yun_topLogin" style="background:#fff;border:1px solid red;width:120px;"> 
<a class="yun_More"  href="javascript:void(0)">用户注册</a>
    <ul class="yun_Moredown fn-hide" style=""><li><a href="http://###/index.php?m=register&usertype=1">个人注册</a>
    </li>
    <li><a href="http://###/index.php?m=register&usertype=2">企业注册</a></li>
    </ul>
</div>

转载于:https://blog.51cto.com/8818968/1782519