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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery中多个元素的Hover事件解决方案

    jQuery中多个元素的Hover事件解决方案

    1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: 复制代码 代码如下: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的区域时触发fun1,离开时触发fun2.你也许

  • jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

    jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

    今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果,一开始,表格透明度不变. 当我鼠标移动到第二排第三个单元格,其他单元格降低透明度. 解决方法 一开始,我用的是CSS实现方法,是下面这样 #table td{ opacity:0.5; } #table td:hover{ opacity:1; } 不过这样一开始进去的时候表格透明度就是0.5,看起来很不好.

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

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

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

  • JS简单获得节点元素的方法示例

    本文实例讲述了JS简单获得节点元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net - JS几种获得节点元素的方法</title> <script type="application/javascript">

  • js给图片打马赛克的方法示例

    js给图片打马赛克的方法示例

    本文主要主要介绍了js给图片打马赛克的方法示例,分享给大家,具体如下: 效果演示 Canvas简介 这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript) 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务 getContext() 方法可返回一个对象,该对象提供了用

  • 浅谈vue.js导入css库(elementUi)的方法

    1.安装以下模块,让webpack可以解析css文件 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev 2.安装elementUi模块 cnpm install element-ui@next -S 3.在webpack.base.conf.js中添加配置 { test: /\\\\\\\\.css$/, loader: "styl

  • python中pandas库中DataFrame对行和列的操作使用方法示例

    用pandas中的DataFrame时选取行或列: import numpy as np import pandas as pd from pandas import Sereis, DataFrame ser = Series(np.arange(3.)) data = DataFrame(np.arange(16).reshape(4,4),index=list('abcd'),columns=list('wxyz')) data['w'] #选择表格中的'w'列,使用类字典属性,返回的是S

  • Ionic + Angular.js实现图片轮播的方法示例

    Ionic + Angular.js实现图片轮播的方法示例

    本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl

  • 多个js与css文件的合并方法详细说明

    在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件. 下面就简单介绍一个方法,十分简单.下面介绍以合并js文件为例 (1) G.js文件 复制代码 代码如下: ~function(){ window.G={}; G.Method={ add:function(){ alert(111);} ,sub:function(){

  • JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="

  • JS简单实现数组去重的方法示例

    JS简单实现数组去重的方法示例

    本文实例讲述了JS简单实现数组去重的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>JS数组去重</title> <meta http-equiv=&

  • JS生成随机打乱数组的方法示例

    JS生成随机打乱数组的方法示例

    本文实例讲述了JS生成随机打乱数组的方法.分享给大家供大家参考,具体如下: 一.比较乱的排序方法 function fnLuanXu(num) { var aLuanXu=[]; for (var i = 0; i < num; i++) { aLuanXu[i] = i; } for (var i = 0; i < num; i++) { var iRand = parseInt(num * Math.random()); var temp = aLuanXu[i]; aLuanXu[i]

随机推荐