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. 【leetcode】String to Integer (atoi)

    String to Integer (atoi) Implement atoi to convert a string to an integer. Hint: Carefully consider ...

  2. Python egg

    http://blog.csdn.net/turkeyzhou/article/details/8876658

  3. C++ traits

    [本文链接] http://www.cnblogs.com/hellogiser/p/cplusplus-traits.html [分析] 什么是traits?其实它并不是一个新的概念,上个世纪90年 ...

  4. 24.栈的push和pop序列[StackPushPopSequence]

    [题目] 输入两个整数序列.其中一个序列表示栈的push顺序,判断另一个序列有没有可能是对应的pop顺序.为了简单起见,我们假设push序列的任意两个整数都是不相等的. 比如输入的push序列是1.2 ...

  5. Find them, Catch them（poj 1703）

    题目大意: 在这个城市里有两个黑帮团伙,现在给出N个人,问任意两个人他们是否在同一个团伙输入D x y代表x于y不在一个团伙里输入A x y要输出x与y是否在同一团伙或者不确定他们在同一个团伙里 思路 ...

  6. hadoop中常见元素的解释

    secondarynamenode 图: secondarynamenode根据文件的的大小对namenode的编辑日志和镜像日志 进行合并. 光从字面上来理解,很容易让一些初学者先入为主的认为:Se ...

  7. OpenStack Swift集群部署流程与简单使用

    之前介绍了<OpenStack Swift All In One安装部署流程与简单使用>,那么接下来就说一说Swift集群部署吧. 1. 简介 本文档详细描述了使用两台PC部署一个小型Sw ...

  8. DbHelper-SQL数据库访问助手

    using System; using System.Data; using System.Data.SqlClient; namespace Whir.Software.Framework.Ulti ...

  9. Azure DocumentDB对比MongoDB

    (此文章同时发表在本人微信公众号"dotNET每日精华文章") 今天推荐的文章对Azure DocumentDB和MongoDB的进行了比较,也给出了一些使用建议. 我想很多朋友都 ...

  10. Python实现的粒子群优化算法

    01.from numpy import array 02.from random import random 03.from math import sin, sqrt 04. 05.iter_ma ...