首页 web前端 js教程 hover的用法实例总结

hover的用法实例总结

Jan 06, 2018 am 09:11 AM
hover 总结 用法

本文主要为大家带来一篇基于hover的用法实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

//hover,鼠标移入移出的另一种用法


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>左导航特效</title>
  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
      font-size: 12px;
    }
    #nav .navsBox {
      width: 160px;
    }
    #nav .navsBox .firstNav {
      height:45px;
      line-height:45px;
      background-color:#EBEBEB;
      border-left:10px solid #FE705C;
      padding-left:20px;
      width:130px;
      font-weight:bold;
      cursor: pointer;
    }
    #nav .navsBox ul {
      display:none;
      list-style:none;
    }
    #nav .navsBox ul li {
      display:block;
      height:45px;
      line-height:45px;
      padding-left:70px;
      width:90px;
      background-color:#F2F2F2;
      background-position:33px 7px;
      background-repeat:no-repeat;
    }
    #nav .navsBox ul li.jedh {
      background-image:url("./images/huan.gif");
    }
    #nav .navsBox ul li.jlbbyk {
      background-image:url("./images/you.gif");
    }
    #nav .navsBox ul li.jwljb {
      background-image:url("./images/gouwu.gif");
    }
    #nav .navsBox ul li.mrljb {
      background-image:url("./images/meiri.gif");
    }
    #nav .navsBox ul li.vipjtj {
      background-image:url("./images/zhe.gif");
    }
    #nav .navsBox ul li.onbg {
      background-color:#F9DBD1;
    }
    #nav .navsBox ul li a {
      color:#000;
      text-decoration:none;
    }
  </style>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
    $(function () {
      $(".firstNav").click(function () {
        var $ul= $(this).next();
       if($ul.is(":visible")){
         $ul.hide();
       }else{
         $ul.show();
         $ul.children().hover(function () {
           $(this).addClass("onbg");
         },function () {
           $(this).removeClass("onbg")
         })
       }
      })
    })
  </script>

</head>
<body>
<p id="nav">
  <p class="navsBox">
    <p class="firstNav">购物特权</p>
    <ul>
      <li class="jedh"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >全额兑换</a></li>
      <li class="jlbbyk"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >俱乐部包邮卡</a></li>
      <li class="jwljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物领金币</a></li>
      <li class="mrljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >每日领金币</a></li>
      <li class="vipjtj"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >VIP阶梯价</a></li>
    </ul>
  </p>
</p>
</body>
</html>
登录后复制

相关推荐:

CSS中hover选择器的使用详解

jQuery中关于hover和点击事件之间的冲突详解(图)

jQuery中关于toggle和hover的使用详解

以上是hover的用法实例总结的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

CSS小技巧:利用transition保留hover状态 CSS小技巧:利用transition保留hover状态 Sep 27, 2022 pm 02:01 PM

如何保留 hover 的状态?下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法,希望对大家有所帮助!

解析JSP注释的使用方法和分类 解析JSP注释的使用方法和分类 Feb 01, 2024 am 08:01 AM

JSP注释的分类及用法解析JSP注释分为两种:单行注释:以结尾,只能注释单行代码。多行注释:以/*开头,以*/结尾,可以注释多行代码。单行注释示例多行注释示例/**这是一段多行注释*可以注释多行代码*/JSP注释的用法JSP注释可以用来注释JSP代码,使其更易于阅

如何正确使用C语言的exit函数 如何正确使用C语言的exit函数 Feb 18, 2024 pm 03:40 PM

c语言exit函数怎么用,需要具体代码示例在C语言中,我们常常需要在程序中提前终止程序的执行,或者在某个特定的条件下退出程序。C语言提供了exit()函数来实现这个功能。本文将介绍exit()函数的用法,并提供相应的代码示例。exit()函数是C语言中的标准库函数,它包含在头文件中。它的作用是终止程序的执行,并且可以带一个整型

WPSdatedif函数的用法 WPSdatedif函数的用法 Feb 20, 2024 pm 10:27 PM

WPS是一款常用的办公软件套件,其中的WPS表格功能被广泛使用于数据处理和计算。在WPS表格中,有一个非常有用的函数,即DATEDIF函数,它用于计算两个日期之间的时间差。DATEDIF函数是英文单词DateDifference的缩写,它的语法如下:DATEDIF(start_date,end_date,unit)其中,start_date表示起始日期

总结Linux系统中system()函数的用法 总结Linux系统中system()函数的用法 Feb 23, 2024 pm 06:45 PM

Linux下system()函数的总结在Linux系统中,system()函数是一个非常常用的函数,它可以用于执行命令行命令。本文将对system()函数进行详细的介绍,并提供一些具体的代码示例。一、system()函数的基本用法system()函数的声明如下:intsystem(constchar*command);其中,command参数是一个字符

Python函数介绍:abs函数的用法和示例 Python函数介绍:abs函数的用法和示例 Nov 03, 2023 pm 12:05 PM

Python函数介绍:abs函数的用法和示例一、abs函数的用法介绍在Python中,abs函数是一个内置函数,用于计算给定数值的绝对值。它可以接受一个数字参数,并返回该数字的绝对值。abs函数的基本语法如下:abs(x)其中,x是要计算绝对值的数值参数,可以是整数或浮点数。二、abs函数的示例下面我们将通过一些具体的示例来展示abs函数的用法:示例1:计算

怎么移除css的hover事件 怎么移除css的hover事件 Feb 01, 2023 am 10:06 AM

移除css hover事件的方法:1、;通过“$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })”方法绑定hover事件;2、通过“$('a').off('mouseenter').unbind('mouseleave');”方法取消绑定的hover事件即可。

体验即飞 携手哈浮X1相机的飞行之旅 体验即飞 携手哈浮X1相机的飞行之旅 Jan 15, 2024 pm 02:21 PM

我们经常能够在网上看到很多精彩的俯视视角的视频,无人机拍出来的画面确实相当震撼,但其实很多人对无人机的认知很有限,例如有些地方限飞为什么还能飞?其实即开即飞的“无人机”才是当前的主流,更值得大多数人选择,今天就给大家带来哈浮飞行相机X1的上手体验。外观方面,哈浮飞行相机X1,首创折叠设计,整机仅125g,比手机轻,折叠后可以轻松手握,放进包包毫无压力。四个软性染叶和安全边框设计,完美保护拍摄安全。染叶创新采用Biobased生物基材,高弹耐用,安全环保;更有全保护边框加持,起飞降落都能贴心保护手

See all articles