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. Sybase IQ如何将大文件数据迅速加载到数据库

    试想一下,如果一个文件5G.10G甚至更大.如何将它迅速地加载到数据库指定的表呢?我们看看Sybase IQ是如何迅速地将表的数据加载到数据库的. 数据文件格式: 1440,2011-01-09 00 ...

  2. cocos2d-x如何解决图片显示模糊问题

    转载http://zhidao.baidu.com/link?url=JTUKP5quGfMQixLZSvtC2XlKMkQDyQbYW72_DRyD6KDRpkLs8_6poQtKkwsyqzU8q ...

  3. Android measure和layout的一点理解

    首先,推荐文章,http://blog.csdn.net/hqdoremi/article/details/9980481,http://www.docin.com/p-571954086.html ...

  4. 【JAVA、C++】 LeetCode 008 String to Integer (atoi)

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  5. codeforces B. Valera and Contest 解题报告

    题目链接:http://codeforces.com/problemset/problem/369/B 题目意思:给出6个整数, n, k, l, r, sall, sk ,需要找出一个满足下列条件的 ...

  6. discuz插件开发新手入门 超详细

    作为一个新手,目前也是刚刚玩转discuz的插件功能,好东西不敢独享,就拿出来大家一起分享入门的过程.现在网上很多关于discuz的插件教程都是很简单的教程,原因可能是这个东西是商业化的东西,本着分享 ...

  7. HDU 5742 It's All In The Mind (贪心) 2016杭电多校联合第二场

    题目:传送门. 题意:求题目中的公式的最大值,且满足题目中的三个条件. 题解:前两个数越大越好. #include <iostream> #include <algorithm> ...

  8. UESTC 1215 (思维题 旋转)

    Secrete Master Plan Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Othe ...

  9. jsp url传值乱码

    <Connector port="8080" maxHttpHeaderSize="8192" minProcessors="10"  ...

  10. Linux命令--文件权限和磁盘管理

    1.chmod chmod [ugoa][+-=][rwx] file 改变目录或者文件的权限. u是user,g是group,o是other,a是all. +是添加权限,-是去掉权限,=改变权限为. ...