如何用jq实现下拉框的简易方式

最新推荐文章于 2022-06-08 20:46:07 发布

SaintSeiya666

最新推荐文章于 2022-06-08 20:46:07 发布

阅读量208

点赞数

分类专栏： web前端文章标签： jquery实现交互功能点

本文链接：https://blog.youkuaiyun.com/qq_41766163/article/details/102870630

版权

web前端专栏收录该内容

1 篇文章

订阅专栏

重要的思路：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <style>
        .app{
            width: 500px;
            margin: 100px auto;
            background-color: #ccc;
        }
        .m, .n{
            width: 200px;
            height: 200px;
            float: left;
        }
        .m{
            background-color: pink;
        }
        .n{
            background-color: skyblue;
            display: none;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="m"></div>
    <div class="n"></div>
</div>
<script type="text/javascript" src="../js/jquery-1.12.1.min.js"></script>
<script>
    //核心代码
    $(".app").hover(function () {
       $(this).children(".n").css("display", "block");
    },function () {
        $(this).children(".n").css("display", "none");
    });
</script>
</body>
</html>