脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS实现css hover操作

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

 更新时间：2017年04月07日 11:02:30   作者：谢玉胜  
这篇文章主要介绍了JS实现css hover操作的方法,涉及javascript事件响应及页面元素css属性动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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>

运行效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

相关文章

  • javascript实现的listview效果

    javascript实现的listview效果

    javascript实现的listview效果...
    2007-04-04
  • 基于JS代码实现实时显示系统时间

    基于JS代码实现实时显示系统时间

    这篇文章主要介绍了基于JS代码实现实时显示系统时间的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • js生成随机数(指定范围)的实例代码

    js生成随机数(指定范围)的实例代码

    下面小编就为大家带来一篇js生成随机数(指定范围)的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS实现手机号脱敏的方法详解

    JS实现手机号脱敏的方法详解

    脱敏指的是通过特定的技术手段对敏感数据进行处理,使其不再直接暴露给用户或系统,防止敏感信息泄露,通常在测试、开发、数据处理等场景中使用,本文给大家介绍了JS实现手机号脱敏的方法,需要的朋友可以参考下
    2025-03-03
  • JavaScript数组reduce()方法 

    JavaScript数组reduce()方法 

    这篇文章主要介绍了JavaScript数组reduce()方法，reduce()方法是处理数组的方法，它接收一个函数和一个初始值，然后将数组中的每个元素和初始值当作参数传入这个函数中进行处理，最后返回和初始值相同类型的值,需要的朋友可以参考一下
    2022-01-01
  • webpack多入口多出口的实现方法

    webpack多入口多出口的实现方法

    这篇文章主要介绍了webpack多入口多出口的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 值得分享和收藏的xmlplus组件学习教程

    值得分享和收藏的xmlplus组件学习教程

    值得分享和收藏的xmlplus组件学习教程,xmlplus是一个设计非常独特 JavaScript 框架，用于快速开发前后端项目，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js中 计算两个日期间的工作日的简单实例

    js中 计算两个日期间的工作日的简单实例

    下面小编就为大家带来一篇js中 计算两个日期间的工作日的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript学习笔记之数组基本操作示例

    JavaScript学习笔记之数组基本操作示例

    这篇文章主要介绍了JavaScrip学习笔记之数组基本操作,结合实例形式分析了javascript数组的基本定义、添加、删除、修改、连接、排序等操作技巧,需要的朋友可以参考下
    2019-01-01
  • layer.alert回调函数执行关闭弹窗的实例

    layer.alert回调函数执行关闭弹窗的实例

    今天小编就为大家分享一篇layer.alert回调函数执行关闭弹窗的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论