JS来操作hover
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的更多相关文章
- js简单操作Cookie
贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- node.js高效操作mongodb
node.js高效操作mongodb Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为Jav ...
- js字符串操作
javascript中字符串常用操作总结.JS字符串操作大全 String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是 ...
- Node.js之操作文件系统（一）
Node.js之操作文件系统(一) 1. 同步方法与异步方法 在Node.js中,使用fs模块来实现所有有关文件及目录的创建.写入及删除操作.,在fs模块中,所有对文件及目录的操作都可以使用同步与异步 ...
- Node.js之操作文件系统（二）
Node.js之操作文件系统(二) 1.创建与读取目录 1.1 创建目录 在fs模块中,可以使用mkdir方法创建目录,该方法的使用方法如下: fs.mkdir(path,[mode],callbca ...
- js数组操作-添加，删除
js 数组操作常用方法. push():在数组后面加入元素,并返回数组的长度 unshift():在数组前面加入元素,并返回数组的长度 pop()删除最后一个元素 shift()删除第一个元素 var ...
- 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- js数组操作-最佳图解
js数组操作-最佳图解
随机推荐
- 【Python】Python AES 对称加密示例
代码: import sys from Crypto.Cipher import AES from binascii import b2a_hex, a2b_hex AES_SECRET_KEY = ...
- JavaScript常用事件
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 on ...
- 70 数组的Kmin算法和二叉搜索树的Kmin算法对比
[本文链接] http://www.cnblogs.com/hellogiser/p/kmin-of-array-vs-kmin-of-bst.html [分析] 数组的Kmin算法和二叉搜索树的Km ...
- Android app主线程UI更新间歇性崩溃的问题
对App进行开发测试时,偶尔出现app崩溃的问题.日志如下: 10-25 18:44:52.935 15290-15290/com.zzq.cnblogs E/AndroidRuntime﹕ FATA ...
- 转载一篇关于ios copy的文章
由于原文创作时间较早,一些内容不实用了,我对其进行了加工,去掉了一部分内容,添加了一点注释. 原文连接 http://www.cnblogs.com/ydhliphonedev/archive/201 ...
- Enum:Smallest Difference(POJ 2718)
最小的差别 题目大意:输入一串数字,问你数字的组合方式,你可以随意用这些数字组合(无重复)来组合成一些整数(第一位不能为0),然后问你组合出来的整数的差最小是多少? 这一题可以用枚举的方法去做,这里我 ...
- Maven简介
转载地址:http://www.cnblogs.com/itech/archive/2011/11/01/2231837.html Ant是软件构建工具,Maven的定位是软件项目管理和理解工具.Ma ...
- 数列（codevs 1141）
题目描述 Description 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13 ...
- C++基础内容复习
下列语句定义了5个变量: int count; double sales_price,sum; std::string title; Sales_item bookItem; 每个定义都是以类型说明符 ...
- JUC回顾之-CyclicBarrier底层实现和原理
1.CyclicBarrier 字面意思是可循环(Cyclic)使用的屏障(Barrier).它要做的事情是让一组线程到达一个屏障(同步点)时被阻塞,直到最后一个线程到达屏障时候,屏障才会开门.所有被 ...