鼠标进入，显示div

最新推荐文章于 2024-01-26 20:25:43 发布

weixin_30781631

最新推荐文章于 2024-01-26 20:25:43 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/sayHello2World/p/7126257.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width:500px;
            height:600px;
            background-color: #2e6da4;
        }
        .left{
            float:left;
            width: 30%;
            background-color: goldenrod;
        }
        .right{
            float: right;
            width: 70%;
            height: 100%;
            background-color: orchid;
        }
        .hide{
            display: none;
        }
        .willShow{
            float: left;
            width:20%;
            height: 50%;
            background-color: #5cb85c;
            opacity: 0.6;
        }


    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <ol>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
            </ol>
        </div>
        <div class="right"><div class="willShow hide">views</div>content</div>

        <div style="clear: both">

        </div>
    </div>
<script src="jquery-3.2.1.slim.js"></script>
<script>
    $(function () {
        $('li').bind('mouseover',function () {
            $('.willShow').removeClass('hide');
        })

    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/sayHello2World/p/7126257.html

weixin_30781631

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标进入，显示div

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width:500px; ...
复制链接

扫一扫