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. 74 使用BitSet输出数组中的重复元素

    [本文链接] http://www.cnblogs.com/hellogiser/p/using-bitset-to-print-duplicate-elements-of-array.html [题 ...

  2. maven web项目build失败

    通过maven build发布web项目到tomcat时报如下异常: [INFO] ---------------------------------------------------------- ...

  3. Java集合框架中Map接口的使用

    在我们常用的Java集合框架接口中,除了前面说过的Collection接口以及他的根接口List接口和Set接口的使用,Map接口也是一个经常使用的接口,和Collection接口不同,Map接口并不 ...

  4. String解析

    常量池(Constant Pool):指的是在编译期被确定,并被保存在已编译的.class文件中的一些数据.JVM虚拟机为每个被装载的类型维护一个常量池.常量池就是该类型所用到常量的一个有序集和,包括 ...

  5. 队列——解密QQ号

    队列——解密QQ号 --转自啊哈磊[坐在马桶上看算法]算法4:队列——解密QQ号 新学期开始了,小哈是小哼的新同桌(小哈是个小美女哦~),小哼向小哈询问QQ号,小哈当然不会直接告诉小哼啦,原因嘛你懂的 ...

  6. Tomcat AccessLog 格式化

    有的时候我们要使用日志分析工具对日志进行分析,需要对日志进行格式化,比如,要把accessLog格式化成这样的格式 c-ip s-ip x-InstancePort date time-taken x ...

  7. 谈JavaScript代码封装

    前言 也算老生常谈的问题了,再深入搞一搞怎么玩儿封装,如果看到这篇文章的你,正好你也是追求完美的代码洁癖狂者,那么这篇文章相信非常适合你. 举一个例子,编写一个Person类,具有name和birth ...

  8. .net学习笔记----Asp.net的生命周期之一应用程序生命周期

    Http请求刚刚到达服务器的时候 当服务器接收到一个 Http请求的时候,IIS (Internet Information Services,互联网信息服务)首先需要决定如何去处理这个请求. 什么是 ...

  9. mysql-关于Unix时间戳（unix_timestamp）

    unix_timestamp时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp). Unix时间戳(Unix t ...

  10. Redis经验谈

    新浪作为全世界最大的Redis用户,在开发和运维方面有非常多的经验.本文作者来自新浪,希望能为业界提供一些亲身经历,让大家少走弯路. 使用初衷 从2010年上半年起,我们就开始尝试使用Redis,主要 ...