当鼠标移出灰色区域时候,菜单项怎么隐藏起来

无标题文档

var $=function(id){
return document.getElementById(id);
}
function hover(){
if($('hover').style.display == 'none'){
$('hover').style.display = '';
}else{
$('hover').style.display = 'none';
}
}

*{margin:10px; padding:0}
#nav{border:#ccc 1px solid; height:25px; width:198px; text-align:center; line-height:25px; margin-bottom:0}
#hover{
position:absolute;
height:100px;
width:200px;
margin-top:-2px;
text-align:center;
background-color:#ccc;
}

鼠标移上来

  • 菜单一
  • 菜单二

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 当鼠标移出灰色区域时候,菜单项怎么隐藏起来

    无标题文档 var $=function(id){ return document.getElementById(id); } function hover(){ if($('hover').style.display == 'none'){ $('hover').style.display = ''; }else{ $('hover').style.display = 'none'; } } *{margin:10px; padding:0} #nav{border:#ccc 1px soli

  • 利用JQuery动画制作滑动菜单项效果实现步骤及代码

    利用JQuery动画制作滑动菜单项效果实现步骤及代码

    效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字. 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除), 使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子. 代码如下: 复制代码 代码如下: $(function () { var webNav = { val: { target: 0

  • js实现的黑背景灰色二级导航菜单效果代码

    js实现的黑背景灰色二级导航菜单效果代码

    本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款js实现的黑背景灰色二级导航菜单,兼容IE6.firefox的js+css横向二极导航菜单.挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代码如

  • jquery实现点击向下展开菜单项(伸缩导航)效果

    jquery实现点击向下展开菜单项(伸缩导航)效果

    本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果.分享给大家供大家参考.具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS.css和jquery部分. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu

  • 在Flex中给datagrid添加右键菜单项的具体实现

    在Flex中给datagrid添加右键菜单项的具体实现

    复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" crea

  • jQuery实现响应鼠标背景变化的动态菜单效果代码

    jQuery实现响应鼠标背景变化的动态菜单效果代码

    本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co

  • jQuery实现导航栏头部菜单项点击后变换颜色的方法

    jQuery实现导航栏头部菜单项点击后变换颜色的方法

    本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法.分享给大家供大家参考,具体如下: 实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; color

  • 基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

    基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

    效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

  • IE奥秘——添加新菜单项（推荐）

    本文将介绍如何添加一个菜单项到微软Internet Explorer浏览器的"工具"(Tools)下拉菜单中,这个新添加的菜单项表示运行一个Microsoft Win32应用程序,或者表示运行一个脚本程序. 需要的基础知识与环境 如果想在Internet Explorer中准确地完成在"工具"菜单下添加菜单项目的功能,你必须要熟悉注册表的操作. 而且,这里讨论的方法,要求浏览器是Internet Explorer 版本5 或者更高版本. 通用步骤 这一节描述的步骤必

  • js实现鼠标点击左上角滑动菜单效果代码

    js实现鼠标点击左上角滑动菜单效果代码

    本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

随机推荐