Home Web Front-end JS Tutorial An example tutorial of hover

An example tutorial of hover

Jul 17, 2017 pm 01:39 PM
hover Example usage

Example

Select the element on which the mouse pointer is floating and set its style:

a:hover
{
background-color:yellow;
}

//hover, another way to move the mouse in and out

<!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>
Copy after login

The above is the detailed content of An example tutorial of hover. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Analyze the usage and classification of JSP comments Analyze the usage and classification of JSP comments Feb 01, 2024 am 08:01 AM

Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read

How to correctly use the exit function in C language How to correctly use the exit function in C language Feb 18, 2024 pm 03:40 PM

How to use the exit function in C language requires specific code examples. In C language, we often need to terminate the execution of the program early in the program, or exit the program under certain conditions. C language provides the exit() function to implement this function. This article will introduce the usage of exit() function and provide corresponding code examples. The exit() function is a standard library function in C language and is included in the header file. Its function is to terminate the execution of the program, and can take an integer

Usage of WPSdatedif function Usage of WPSdatedif function Feb 20, 2024 pm 10:27 PM

WPS is a commonly used office software suite, and the WPS table function is widely used for data processing and calculations. In the WPS table, there is a very useful function, the DATEDIF function, which is used to calculate the time difference between two dates. The DATEDIF function is the abbreviation of the English word DateDifference. Its syntax is as follows: DATEDIF(start_date,end_date,unit) where start_date represents the starting date.

Introduction to Python functions: Usage and examples of isinstance function Introduction to Python functions: Usage and examples of isinstance function Nov 04, 2023 pm 03:15 PM

Introduction to Python functions: Usage and examples of the isinstance function Python is a powerful programming language that provides many built-in functions to make programming more convenient and efficient. One of the very useful built-in functions is the isinstance() function. This article will introduce the usage and examples of the isinstance function and provide specific code examples. The isinstance() function is used to determine whether an object is an instance of a specified class or type. The syntax of this function is as follows

Introduction to Python functions: Usage and examples of abs function Introduction to Python functions: Usage and examples of abs function Nov 03, 2023 pm 12:05 PM

Introduction to Python functions: usage and examples of the abs function 1. Introduction to the usage of the abs function In Python, the abs function is a built-in function used to calculate the absolute value of a given value. It can accept a numeric argument and return the absolute value of that number. The basic syntax of the abs function is as follows: abs(x) where x is the numerical parameter to calculate the absolute value, which can be an integer or a floating point number. 2. Examples of abs function Below we will show the usage of abs function through some specific examples: Example 1: Calculation

Experience is flying. Take a flight with Haval X1 camera Experience is flying. Take a flight with Haval X1 camera Jan 15, 2024 pm 02:21 PM

We can often see a lot of wonderful top-down videos on the Internet. The pictures taken by drones are indeed quite shocking. However, in fact, many people have limited understanding of drones. For example, why can they still fly in some places where flying is restricted? In fact, ready-to-fly “drones” are the current mainstream, and they are more worthy of most people’s choice. Today I will give you a hands-on experience with the Harvest Flying Camera X1. In terms of appearance, the Harvest Flying Camera X1 has the first folding design. The whole camera is only 125g, which is lighter than a mobile phone. After folding, it can be easily held in the hand and put into a bag without any pressure. Four soft dyed leaves and safety frame design perfectly protect the safety of shooting. Dyed Leaf innovatively uses Biobased biological substrate, which is highly elastic, durable, safe and environmentally friendly; it also has a fully protective frame to protect your hands during takeoff and landing.

Detailed explanation and usage introduction of MySQL ISNULL function Detailed explanation and usage introduction of MySQL ISNULL function Mar 01, 2024 pm 05:24 PM

The ISNULL() function in MySQL is a function used to determine whether a specified expression or column is NULL. It returns a Boolean value, 1 if the expression is NULL, 0 otherwise. The ISNULL() function can be used in the SELECT statement or for conditional judgment in the WHERE clause. 1. The basic syntax of the ISNULL() function: ISNULL(expression) where expression is the expression to determine whether it is NULL or

How to use Apple shortcuts How to use Apple shortcuts Feb 18, 2024 pm 05:22 PM

How to use Apple shortcut commands With the continuous development of technology, mobile phones have become an indispensable part of people's lives. Among many mobile phone brands, Apple mobile phones have always been loved by users for their stable systems and powerful functions. Among them, the Apple shortcut command function makes users’ mobile phone experience more convenient and efficient. Apple Shortcuts is a feature launched by Apple for iOS12 and later versions. It helps users simplify their mobile phone operations by creating and executing custom commands to achieve more efficient work and

See all articles