html侧栏对应表单的提示显示

最新推荐文章于 2024-04-03 01:04:29 发布

泼丝

最新推荐文章于 2024-04-03 01:04:29 发布

阅读量1.1k

点赞数

分类专栏： html/js

html/js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>侧栏对应提示</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 900px;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        border:none;
    }
    .leftbd{
        width: 200px;
        height: 800px;
        border:1px solid #990099;
        float: left;
         
    }
    .leftbd2{
        width: 200px;
        height: auto;
        max-height: 700px;
        border:none;
        float: left;
        overflow: hidden;
    }
    .rightbd{
        width: 660px;
        height: 800px;
        border:1px solid #990099;
        margin-left: 20px;
        float: left;
         
    }
    .leftbd ul{
        width: 200px;
        height: auto;
        max-height: 700px;
        overflow: hidden;
        margin-top: 30px;
        display:block;
        float: left;
        overflow-y: scroll;
    }
    .leftbd ul li{
        width: 200px;
        display: block;
        font-size: 16px;
        padding: 15px 0;
        text-align: center;
        background: #eaeaea;
        margin-bottom: 3px;
        cursor: pointer;
        list-style-type: none;
    }
    .leftbd ul li:hover{
        background: #009900;
        color: #ffffff;
 
    }
    .tishi{
        position: absolute;
        width: 200px;
        font-size: 16px;
        padding: 15px 0;
        text-align: center;
        background: #000099;
        color: #990099;
        display: block;
        display: none;
        margin-top: -15px;
        margin-left: 132px;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="leftbd">
            <div class="leftbd2">
            <ul class="leftul">
                <li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
                <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
                <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
                <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
                <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
                <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
                <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
                <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
                <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
                <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li><li class="fd"><span class="tishi">哈哈</span> <span>android</span> </li>
                <li class="fd"><span class="tishi">哈哈2</span><span>c#</span></li>
                <li class="fd"><span class="tishi">哈哈3</span><span>iOS</span></li>
                <li class="fd"><span class="tishi">哈哈4</span><span>jquery</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
                <li class="fd"><span class="tishi">哈哈5</span><span>Javascript</span></li>
            </ul>
            </div>
        </div>
        <div class="rightbd"></div>
    </div>
    <script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
         
            var inul=$(".leftul");
            var inli=inul.children();
            var insp;
 
            inli.hover(function(e){
                $(this).find('.tishi').toggle();
            });
 
 
         
    });
     
    </script>
</body>
</html>

泼丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html侧栏对应表单的提示显示

侧栏对应提示 *{ margin: 0; padding: 0; } .main{ width: 900px; height: auto; margin: 0 auto; overflow: hidden; border:none; }
复制链接

扫一扫