JS实现css hover操作的方法示例


Posted in Javascript onApril 07, 2017

本文实例讲述了JS实现css 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实现css hover操作的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 #Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
js时间查询插件使用详解
Apr 07 #Javascript
You might like
php 批量替换html标签的实例代码
2013/11/26 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
简单实现python收发邮件功能
2018/01/05 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
pycharm快捷键汇总
2020/02/14 Python
Python-for循环的内部机制
2020/06/12 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
RealTek面试题
2016/06/28 面试题
面向对象设计的原则是什么
2013/02/13 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
中学生获奖感言
2014/02/04 职场文书
我的求职择业计划书
2014/04/04 职场文书
我爱我校演讲稿
2014/05/21 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年妇女工作总结
2015/05/14 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书