How to use the hover property in html

This article focuses on "how to use the hover attribute in html". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use the hover attribute in html.

Definition of hover

The hover selector is used to select elements on which the mouse pointer floats. It applies to all elements.

The hover selector applies to all elements

The usage of hover

Usage 1: hover the mouse over the element to change the element style

Example: when the mouse hovers over the font, the font color changes

< style >

H1:hover {color: pink;}

< body >

< h1 >

This is the most common usage, but it changes the style style

Usage 2: control the style of other blocks through hover

This usage can be divided into the following three styles

(1) controlling the style of child elements

< style >

H1:hover p {background-color: pink;}

< body >

< h1 >

< p >

The usage of hover

(2) controlling the style of sibling elements.

< style >

H1:hover+p {background-color: pink;}

< body >

< h1 >

< p >

The usage of hover

(3) Control the style of the nearest element

'~' controls the nearest element

< style >

H1:hover~p {background-color: pink;}

< body >

< h1 >

< p >

At this point in the usage of hover, I believe you have a deeper understanding of "how to use the hover attribute in html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!