Home Web Front-end JS Tutorial Introduction to the usage of hover and the usage of live (mouse hover effect)_jquery

Introduction to the usage of hover and the usage of live (mouse hover effect)_jquery

May 16, 2016 pm 05:38 PM
hover live mouseover

Copy code The code is as follows:

// live is mainly used to bind events to dynamically loaded elements
// Product Catalog
$(".lm_div_q dd").live({
mouseenter: function() {
$(this).find("strong").addClass("tj_strong ");
$(this).find("strong").next().slideDown(200); // Display drop-down box
},
mouseleave: function() {
$ (this).find("strong").removeClass("tj_strong");
$(this).find("strong").next().slideUp(200); // Hide the drop-down box
}
});
//Hover directly binds events
// Product Catalog<br>$(".lm_div_q dd").hover(function( ){ <br>$(this).find("strong").addClass("tj_strong"); <br>$(this).find("strong").next().stop(true,true). slideDown(200); // Display drop-down box <br>}, function(){ <br>$(this).find("strong").removeClass("tj_strong"); <br>$(this).find ("strong").next().stop(true,true).slideUp(200); // Hide drop-down box<br>});




 




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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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)

CSS tip: Use transition to retain hover state CSS tip: Use transition to retain hover state Sep 27, 2022 pm 02:01 PM

How to preserve hover state? The following article will introduce to you how to retain the hover state without using JavaScript. I hope it will be helpful to you!

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.

How to set mouse hover time in Win11? Win11 mouse hover time setting tutorial How to set mouse hover time in Win11? Win11 mouse hover time setting tutorial Feb 01, 2024 pm 02:54 PM

How to set mouse hover time in Win11? We can set the mouse hover time when using win11 system, but many users don't know how to set it? Users can directly click to create a new text document and enter the following code to use it directly. Let this site carefully introduce to users how to set the mouse hover time in Win11. How to set the mouse hover time in Win11 1. Click [right-click] on a blank space on the desktop, and select [New - Text Document] from the menu item that opens. 3. Then click [File] in the upper left corner, and in the open drop-down item, select [Save As], or press the [Ctrl+Shift+S] shortcut key on the keyboard. 6

How to remove the hover event in css How to remove the hover event in css Feb 01, 2023 am 10:06 AM

Methods to remove css hover events: 1. Through "$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })" method to bind the hover event; 2. Unbind the hover event through the "$('a').off('mouseenter').unbind('mouseleave');" method. Can.

Tips and methods to use CSS to achieve jitter effects when the mouse is hovering Tips and methods to use CSS to achieve jitter effects when the mouse is hovering Oct 21, 2023 am 08:37 AM

Tips and methods to use CSS to achieve jitter effects when the mouse is hovering. The jitter effects when the mouse is hovering can add some dynamics and interest to the web page and attract the user's attention. In this article, we will introduce some techniques and methods of using CSS to achieve mouse hover jitter effects, and provide specific code examples. The principle of jitter In CSS, we can use keyframe animation (keyframes) and transform properties to achieve the jitter effect. Keyframe animation allows us to define an animation sequence by

How to implement mouse-over magnification effect on images with JavaScript? How to implement mouse-over magnification effect on images with JavaScript? Oct 20, 2023 am 09:16 AM

How to implement mouse-over magnification effect on images with JavaScript? Today's web design pays more and more attention to user experience, and many web pages add some special effects to pictures. Among them, the picture mouse-over magnification effect is a common special effect, which can automatically enlarge the picture when the user hovers the mouse, increasing the interaction between the user and the picture. This article will introduce how to use JavaScript to achieve this effect and give specific code examples. Idea analysis: To achieve the mouse-over magnification effect of images, we can use JavaS

Optimization tips for CSS triggered animation properties: hover and animation Optimization tips for CSS triggered animation properties: hover and animation Oct 20, 2023 pm 12:25 PM

Optimization tips for CSS triggered animation properties: hover and animation Summary: In modern web design, animation effects have become one of the important means to improve user experience. The hover and animation properties of CSS are the keys to achieving animation effects. This article will introduce some optimization techniques for these two attributes and provide specific code examples to help developers better apply and optimize animation effects. Introduction: CSS hover and animation attributes can be implemented in web pages

The role of hover in html The role of hover in html Feb 20, 2024 am 08:58 AM

The role of hover in HTML and specific code examples In web development, hover refers to triggering some actions or effects when the user hovers the cursor over an element. It is implemented through the CSS :hover pseudo-class. In this article, we will introduce the role of hover and specific code examples. First, hover enables an element to change its style when the user hovers over it. For example, when hovering the mouse over a button, you can change the button's background color or text color to remind the user what to do next.

See all articles