hover我们可以用css的方式写，当然，也可以用js的方式写

<html>

<head>

	<title>js的下拉菜单效果</title>

	<style type="text/css">

		*{

			padding:0px;

			margin:0px;

		}

		ul li{

			list-style: none;

		}

		a{

			text-decoration: none

		}

		.header{

			height: 45px;

			background-color:#FBFBFB;

			border-bottom: 1px solid #C7C7C7;

		}

		.header-center{

			width: 1000px;

			height: 100%;

			margin: 0 auto;

			position: relative;

		}

		.header-mobile{

			width: 130px;

			position: absolute;

			top:0;

			right: 0;

			text-align: center;

		}

/*		.header-mobile:hover .header-mobile-list{

			display: block;

		}*/

		.header-mobile a{

			display: block;

			height: 45px;

			line-height: 45px;

			color:#000000;

		}

		.header-mobile-list{

			display: none;

			background:url(bg.png) no-repeat;

			background-position: 20px 18px;

		}

		.header-mobile-list li{

			height: 45px;

			border-bottom: 1px dashed gray;

			font-family: '微软雅黑';

			line-height: 50px;

			padding-left: 35px;

			padding-top: 5px;

		}

	</style>

</head>

<body>

	<header class="header">

		<div class="header-center">

			<div class="header-mobile" id="headerMobile">

					<a href="">移动客户端</a>

					<ul class="header-mobile-list" id="mobileList">

						<li>新浪微博</li>

						<li>新浪新闻</li>

						<li>新浪体育</li>

						<li>新浪娱乐</li>

						<li>新浪财经</li>

						<li>天气通</li>

					</ul>

			</div>

		</div>

	</header>

</body>

<script type="text/javascript">

//封装选择ID

		window.onload=function(){

			function $(id){

				return document.getElementById(id);

			}

//鼠标进

		$("headerMobile").onmouseover=function(){

			// this.style.display="none";

			$("mobileList").style.display="block"

			//给当钱的添加样式

			this.style.boxShadow=" 0 2px 2px gray"

		}

//鼠标出

		$("headerMobile").onmouseout=function(){

			$("mobileList").style.display="none"

			this.style.boxShadow='none'

		}

		}

</script>

</html>

　　

JS来操作hover的更多相关文章

  1. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  2. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  3. node.js高效操作mongodb

    node.js高效操作mongodb Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为Jav ...

  4. js字符串操作

    javascript中字符串常用操作总结.JS字符串操作大全 String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是 ...

  5. Node.js之操作文件系统（一）

    Node.js之操作文件系统(一) 1. 同步方法与异步方法 在Node.js中,使用fs模块来实现所有有关文件及目录的创建.写入及删除操作.,在fs模块中,所有对文件及目录的操作都可以使用同步与异步 ...

  6. Node.js之操作文件系统（二）

    Node.js之操作文件系统(二) 1.创建与读取目录 1.1 创建目录 在fs模块中,可以使用mkdir方法创建目录,该方法的使用方法如下: fs.mkdir(path,[mode],callbca ...

  7. js数组操作-添加，删除

    js 数组操作常用方法. push():在数组后面加入元素,并返回数组的长度 unshift():在数组前面加入元素,并返回数组的长度 pop()删除最后一个元素 shift()删除第一个元素 var ...

  8. 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  9. js数组操作-最佳图解

    js数组操作-最佳图解

随机推荐

  1. 查看ecshop广告位对应的广告详细信息

    在ecshop的日常应用中,如果添加了很多广告位和广告.然而时间一长又不知道哪些广告是有用的,哪些广告是没用的,广告对应的链接是什么.倘若人工一个个查看又特费时费力不讨好.因而想想办法用sql一次性查 ...

  2. 利用runTime，实现以模型为主的字典转模型（注意与KVC的区别）

    将字典转化为模型,面向模型开发,是在开发中最为常用的功能.利用KVC可以将字典转换为模型,但是前提有三个约束,一个是必须保证模型的属性个数大于等于字典个数,二是属性名称与字典的key必须相同,三是对于 ...

  3. Java性能优化权威指南-读书笔记（三）-JVM性能调优-内存占用

    新生代.老年代.永久代的概念不多说,这三个空间中任何一个不能满足内存分配请求时,就会发生垃圾收集. 新生代不满足内存分配请求时,发生Minor GC,老年代.永久代不满足内存分配请求时,发生Full ...

  4. 安装chocolatey

    C:\> @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.web ...

  5. Hadoop 中文编码相关问题 -- mapreduce程序处理GBK编码数据并输出GBK编码数据（转）

    hadoop的hdfs文件系统中,默认的是utf-8, 故你上传的文件是要设置成utf-8.当输入的是gbk,有该如何? 输入是GBK文件, 输出也是 GBK 文件的示例代码: Hadoop处理GBK ...

  6. jquery require.js AMD

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  7. 使用jQuery简单实现产品展示的图片左右滚动功能

    今天要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS ...

  8. hrbustoj 1161:Leyni（树状数组练习）

    LeyniTime Limit: 3000 MS Memory Limit: 65536 KTotal Submit: 260(59 users) Total Accepted: 80(55 user ...

  9. mac安装nginx

    1,http://nginx.org/en/download.html下载http://nginx.org/download/nginx-1.2.0.tar.gz 2,tar -xf nginx-1. ...

  10. javascript 复习代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...