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. Nested List Weight Sum I & II

    Nested List Weight Sum I Given a nested list of integers, return the sum of all integers in the list ...

  2. python基础——函数的参数

    python基础——函数的参数 定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复 ...

  3. 【解决】 新浪sae固定链接404 问题

    固定链接404 固定链接是一个很重要的内容,wordpress默认的链接很复杂,也不利于搜索引擎搜索.wordpress也提供修改固定链接的功能,在设置里面[固定链接]修改. 但是,使用新浪sae的小 ...

  4. obj-m

    转自:http://blog.sina.com.cn/s/blog_693301190100sxoi.html obj-m (转帖) 目标定义是Kbuild Makefile的主要部分,也是核心部分. ...

  5. 实例讲解虚拟机3种网络模式(桥接、nat、Host-only)

    转自:http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646007.html 前言 很多人安装虚拟机的时候,经常遇到不能上网的问题,而vmwa ...

  6. ML 04、模型评估与模型选择

    机器学习算法 原理.实现与实践——模型评估与模型选择 1. 训练误差与测试误差 机器学习的目的是使学习到的模型不仅对已知数据而且对未知数据都能有很好的预测能力. 假设学习到的模型是$Y = \hat{ ...

  7. 写好的mapreduce程序，编译，打包，得到最后的jar包！ 验证jar包 ！ 整体流程

    创建一个bin目录,用于存放编译.java文件产生的.class等结果,然后编译! 编译结果! 打包操作! 打包结果! 验证打包生成的jar包,是否正常,验证成功!!!!!!!!!!!! 结果正确!! ...

  8. 【xml 报错】xml编译错误

    ---恢复内容开始--- 有时候在xml文件中,特别是于Spring相关的配置文件中,会出现一些不影响程序正常运行的编译错误,如: Referenced file contains errors (h ...

  9. 【转】HADOOP HDFS BALANCER介绍及经验总结

    转自:http://www.aboutyun.com/thread-7354-1-1.html 集群平衡介绍 Hadoop的HDFS集群非常容易出现机器与机器之间磁盘利用率不平衡的情况,比如集群中添加 ...

  10. Spring的replace-method标签

    Spring的解析源码 public void parseReplacedMethodSubElements(Element beanEle, MethodOverrides overrides) { ...