Home >Web Front-end >CSS Tutorial >How to use hover in css
How to use hover in css
- 清浅Original
- 2019-04-30 10:10:43111236browse
In CSS, hover is used to select the element on which the mouse pointer is floating. The syntax is "label selector:hover{style code;}". Usage: 1. Change the style directly on the suspended element; 2. Change The style of child elements; 3. Change the style of sibling elements; 4. Change the style of nearby elements, etc.
There is a hover attribute in CSS, which can be activated when the mouse is moved up. It can be used to implement some functions similar to js. Next, in the article, we will introduce how to use the hover attribute in detail. I hope it will be helpful to everyone.
[Recommended course: CSS tutorial]
Definition of hover
:hover selector For selecting the element on which the mouse pointer is floating, it applies to all elements
:hover The selector applies to all elements
hover usage
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;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
</body>Rendering:
This is the most common usage, it just changes the style style
Usage 2: Control the styles of other blocks through hover
This usage can be divided into the following three styles
(1) Control the style of sub-elements
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1>Rendering:
(2) Control the style of sibling elements
' ' Control sibling elements (sibling elements)
<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>Rendering:
(3) Control the style of nearby elements
'～' Control nearby elements
<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>Rendering:
Summary: The above is the entire content of this article, I hope it will be helpful to everyone.
The above is the detailed content of How to use hover in css. For more information, please follow other related articles on the PHP Chinese website!