任务视频V2.0

任务视频V1.0

知识点

合成事件hover

hover()方法用于模拟光标悬停事件，语法结构如下：

hover(enter，leave);

当光标移动到元素上时，会触发指定的第1个函数（enter）；当光标移出这个元素时，会触发指定的第2个函数（leave）。

特殊事件one

one()事件只执行一次则被删除，语法结构如下：

one(event，[data]，function)

event为添加到元素的一个或多个事件，data是可选参数，传递到函数的额外数据；function是当事件发生时运行的函数。

教学课件V2.0

教学课件V1.0

制作横向导航菜单

任务描述

在页面顶部导航菜单，如图1所示，当光标移入办公时，显示如图2所示，当鼠标移出时，办公下面显示的内容隐藏。类似的，鼠标移入“王丽”和“更多“时，显示内容如图3所示。

图1 导航菜单

图2 办公菜单效果

图3 右侧菜单效果

任务分析

（1）为“办公”、“王丽”和“更多”绑定mouseover或mouseenter事件，鼠标移入时，将层内容显示。

（2）鼠标移出时，刚显示的内容隐藏。

鼠标悬停和鼠标移开会触发.mouseenter和.mouseleave事件，在JQuery中为了方便使用，封装了合成事件hover()方法和toggle()方法。

任务实现

<script type="text/javascript"src="js/jquery-1.11.0.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $(".def-nav,.info-i").hover(function(){

    //find() 方法获得当前元素集合中每个元素的后代

//通过选择器、jQuery 对象或元素来筛选

        $(this).find(".pulldown-nav").addClass("hover");

        $(this).find(".pulldown").show();

    },function(){

        $(this).find(".pulldown").hide();

        $(this).find(".pulldown-nav").removeClass("hover");

    });   

});

</script>

根据所给素材，应用CSS样式制作如图3所示页面，使用jQuery的hover事件实现横向导航菜单效果。

参考答案