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 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
小程序实现上下切换位置
Nov 16 Javascript
AJAX实现省市县三级联动效果
Oct 16 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
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
JS实现百度搜索框
2021/02/25 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python基于ID3思想的决策树
2018/01/03 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
法律六进活动方案
2014/03/13 职场文书
《称象》教学反思
2014/04/25 职场文书
仓库管理计划书
2014/05/04 职场文书
房屋维修协议书范本
2014/09/25 职场文书
银行招聘自荐信
2015/03/06 职场文书
货款欠条范本
2015/07/03 职场文书
小学科学课教学反思
2016/02/23 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Python字典和列表性能之间的比较
2021/06/07 Python
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL
python三子棋游戏
2022/05/04 Python
Android 中的类文件和类加载器详情
2022/06/05 Java/Android