How to use hover in css

清浅
Release: 2020-10-13 09:08:32
Original
110872 people have browsed it

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.

How to use hover in css

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

Rendering:

How to use hover in css

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

Rendering:

How to use hover in css

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

Rendering:

Image 004.png

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

Rendering:

Image 004.png

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!

Related labels:
source:php.cn
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!