hover的一个实例教程-js教程-PHP中文网

首页

web前端

js教程

hover的一个实例教程

零下一度

Jul 17, 2017 pm 01:39 PM

hover 实例用法

实例

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover
{
background-color:yellow;
}

//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?1.1.11"></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><div id="nav"><div class="navsBox"><div class="firstNav">购物特权</div><ul><li class="jedh"><a href="#">全额兑换</a></li><li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li><li class="jwljb"><a href="#">购物领金币</a></li><li class="mrljb"><a href="#">每日领金币</a></li><li class="vipjtj"><a href="#">VIP阶梯价</a></li></ul></div></div></body></html>

登录后复制

以上是hover的一个实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7669

CakePHP 教程

1393

C# 教程

1206

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

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

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

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

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

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

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

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

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

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

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

Python函数介绍：isinstance函数的用法和示例 Nov 04, 2023 pm 03:15 PM

Python函数介绍：isinstance函数的用法和示例Python是一门功能强大的编程语言，提供了许多内置函数，使得编程变得更加方便和高效。其中一个非常有用的内置函数是isinstance()函数。本文将介绍isinstance函数的用法和示例，并提供具体的代码示例。isinstance()函数用于判断一个对象是否是指定的类或类型的实例。该函数的语法如下

MySQL ISNULL 函数详解及用法介绍 Mar 01, 2024 pm 05:24 PM

MySQL中的ISNULL()函数是用于判断指定表达式或列是否为NULL的函数。它返回一个布尔值，如果表达式为NULL则返回1，否则返回0。ISNULL()函数可以在SELECT语句中使用，也可以在WHERE子句中进行条件判断。1.ISNULL()函数的基本语法：ISNULL(expression)其中，expression是要判断是否为NULL的表达式或

解析SQL中使用distinct关键字 Feb 18, 2024 pm 09:21 PM

SQL中distinct用法详解在SQL数据库中，我们经常会遇到需要去除重复数据的情况。此时，我们可以使用distinct关键字，它能够帮助我们去除重复数据，使得查询结果更加清晰和准确。distinct的基本使用方法非常简单，只需要在select语句中使用distinct关键字即可。例如，以下是一个普通的select语句：SELECTcolumn_name

See all articles

hover的一个实例教程

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题