Detailed explanation of the use of hover selector in CSS
Sometimes you need to use the two mouse events mouseover and mouseout, but writing js is more troublesome, and you have to add listening events, so things that can be solved with css should be solved with css as much as possible, which can improve performance. Let me talk about it below. Understanding of :hover:
When we were learning computer applications, the teacher taught us to use the :hover selector to complete the drop-down menu. Before, I only knew how to use it, but I didn’t know why it was used in this way. Now write down how to use it
Definition and usage
Definition:
:hover selector is used to select the element on which the mouse pointer is floating.
:hover selector applies to all elements
Usage 1:
This means: when the mouse is hovering over the style a, the background color of a is set For yellow
a:hover
{
background-color:yellow;
}This is the most common usage, it just changes the style through a
Usage 2:
Use a to control the style of other blocks:
Use a to control the sub-element b of a:
.a:hover .b {
background-color:blue;
}Use a to control a's sibling element c (sibling element):
.a:hover + .c {
color:red;
}Use a controls the nearest element d of a:
.a:hover ~ .d {
color:pink;
}##To summarize:
1. Add nothing in the middle to control child elements;2. '+' controls sibling elements (sibling elements);
3. '～' controls nearby elements;
Example
Use a button to control the movement state of a box. When the mouse moves over the button, the box stops moving. When the mouse moves away, the box continues to move. body code: <body>
<p class="btn stop">stop</p>
<p class="animation"></p>
</body>##
<style>
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>
implementation Effect:
Related recommendations:
The above is the detailed content of Detailed explanation of the use of hover selector in CSS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
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!
What is the identifier of the id selector in css
Sep 22, 2022 pm 03:57 PM
In CSS, the identifier of the id selector is "#". You can specify a specific style for the HTML element marked with a specific id attribute value. The syntax structure is "#ID value {attribute: attribute value;}". The ID attribute is unique and non-repeatable in the entire page; the ID attribute value should not start with a number. IDs starting with numbers will not work in Mozilla/Firefox browsers.
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 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.
Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3
Nov 20, 2023 am 11:20 AM
Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: <divid="container"><divclass="item"> ;First child element</div><divclass="item"&
css pseudo-selector learning pseudo-class selector analysis
Aug 03, 2022 am 11:26 AM
In the previous article "Css Pseudo-Selector Learning - Pseudo-Element Selector Analysis", we learned about pseudo-element selectors, and today we take a closer look at pseudo-class selectors. I hope it will be helpful to everyone!
What to do if the javascript selector fails
Feb 10, 2023 am 10:15 AM
The JavaScript selector fails because the code is not standardized. The solution is: 1. Remove the imported JS code and the ID selector method will be effective; 2. Just introduce the specified JS code before introducing "jquery.js".
How to use hover in css
Feb 23, 2024 pm 12:06 PM
The hover pseudo-class in CSS is a very commonly used selector that allows us to change the style of an element when the mouse is hovering over it. This article will introduce the usage of hover and provide specific code examples. 1. Basic Usage To use hover, we need to first define a style for the element, and then use the :hover pseudo-class to specify the corresponding style when the mouse is hovering. For example, we have a button element. When the mouse hovers over the button, we want the background color of the button to change to red and the text color to white.
