编程 Javascript

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程序设计有所帮助。

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

- Author -

谢玉胜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Cookie 注入是怎样产生的

Apr 08 Javascript

js判断输入是否为正整数、浮点数等数字的函数代码

Nov 17 Javascript

javascript阻止scroll事件多次执行的思路及实现

Nov 08 Javascript

jQuery表单域属性过滤器用法分析

Feb 10 Javascript

充分发挥Node.js程序性能的一些方法介绍

Jun 23 Javascript

详解JavaScript的策略模式编程

Jun 24 Javascript

JavaScript的模块化开发框架Sea.js上手指南

May 12 Javascript

动手写一个angular版本的Message组件的方法

Dec 16 Javascript

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

Jan 09 Javascript

angular2路由之routerLinkActive指令【推荐】

May 30 Javascript

vue-vuex中使用commit提交mutation来修改state的方法详解

Sep 16 Javascript

TypeScript中使用getElementXXX()的示例代码

Sep 12 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