效果图如下：

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{ margin: 0; padding: 0; list-style: none;}

    .nav{

        width: 300px;

        margin: 100px auto;

    }

    .nav li{

        width: 100px;

        height: 40px;

        line-height: 40px;

        float: left;

        text-align: center;

    }

    .nav li a{

        display: block;

        height: 40px;

        text-decoration: none;

        color: #333;

        background: #ccc;

    }

    .nav li a:hover{

        background: pink;

    }

    .nav li ul{

        display: none;

    }

    </style>

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

    $(function(){

        $('.nav li').mouseover(function(){

            $(this).children('ul').css('display','block');

        });

        $('.nav li').mouseout(function(){

            $(this).children('ul').css('display','none');

        });

    })

    </script>

</head>

<body>

    <div class="nav">

            <ul>

                    <li>

                        <a href="###">男星</a>

                        <ul>

                            <li><a href="###">王宝强</a></li>

                            <li><a href="###">陈羽凡</a></li>

                            <li><a href="###">.....</a></li>

                        </ul>

                    </li>

                    <li>

                        <a href="###">女星</a>

                        <ul>

                            <li><a href="###">杨幂</a></li>

                            <li><a href="###">柳岩</a></li>

                            <li><a href="###">赵丽颖</a></li>

                        </ul>

                    </li>

                    <li>

                        <a href="###">导演</a>

                        <ul>

                            <li><a href="###">冯小刚</a></li>

                            <li><a href="###">张艺谋</a></li>

                            <li><a href="###">丁黑</a></li>

                        </ul>

                    </li>

                </ul>

    </div>

</body>

</html>

JS使用的是jQuery函数库，下载地址见另一篇博文。

JQuery实现子级选择器的更多相关文章

  1. JQuery实现父级选择器(广告实现)

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  3. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  4. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  5. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  7. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  8. JQuery 基本知识，选择器，事件，DOM操作

    一.基本知识 Jquery是什么? 它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库.它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的AP ...

  9. 前端基础-jQuery的内容之选择器

    阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...

随机推荐

  1. MySQL 8.0之后版本密码修改

    MySQL刚刚安装完毕时 mysqld --initialize grep password /var/log/mysqld.log 获取临时密码 mysql -uroot -p 输入临时密码登录My ...

  2. 【第一篇笔记】C# 全局容错,全局异常

    网上找到两个方式,一个简单的只是做个记录,另一个能像QQ一样提交到后台. 方法一: static class Program { /// <summary> /// 应用程序的主入口点. ...

  3. db2-表处于暂挂状态

    有时当对表数据进行操作时,表锁了,处于暂挂状态,网上搜的大部分不能解决的话可以尝试用以下语句进行解锁 call sysproc.admin_cmd('reorg table 表名')

  4. Windbg工具使用

    https://www.cnblogs.com/startpoint/p/4194052.html https://www.cnblogs.com/lyl6796910/p/7613664.html ...

  5. 零基础逆向工程39_Win32_13_进程创建_句柄表_挂起方式创建进程

    1 进程的创建过程 打开系统 --> 双击要运行的程序 --> EXE开始执行 步骤一: 当系统启动后,创建一个进程:Explorer.exe(也就是桌面进程) 步骤二: 当用户双击某一个 ...

  6. Linux 学习 之 bash

    Anything is programmable with defined syntax and common lib. Bash Shell is created to programme to L ...

  7. django rest framework 详解

    Django REST framework 是用于构建Web API 的强大而灵活的工具包. 我们可能想使用REST框架的一些原因: Web浏览API对于开发人员来说是一个巨大的可用性. 认证策略包括 ...

  8. DIV命名规范

    DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头: arrow 商标:  ...

  9. JavaScript 获取 当前日期和三十天以前日期

    //获取当前日期 var myDate = new Date(); var nowY = myDate.getFullYear(); var nowM = myDate.getMonth()+1; v ...

  10. java研发常见问题总结2

    1. String.StringBuffer与StringBuilder之间区别 关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 ...