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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
JS高级笔记
Jul 13 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
详解Vue demo实现商品列表的展示
May 07 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中Http协议post请求参数
2015/11/02 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python验证码识别的示例代码
2017/09/21 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
详解python中__name__的意义以及作用
2019/08/07 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
新领导上任欢迎词
2014/01/13 职场文书
办护照工作证明范本
2014/01/14 职场文书
违纪开除通知书
2015/04/25 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
七年级作文之我的梦想
2019/10/16 职场文书