Hover - Pseudo Class Selector

Exercise

In the "index.html" file, replace the code with the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>Hover - Pseudo Class Selector</h1>
  <p>This paragraph has the hover pseudo selector applied. The text will turn blue and the background red when you hover
    your mouse over it.
  </p>
</body>

</html>

Save.
If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
In the "styles.css" file, replace the code with the following:

p:hover {
  color: blue;
  background: red;
}

Save.
In the browser, you should see the following:

Notice how the paragraph text changes to blue and the background color changes to red when you hover your mouse over the paragraph.

Code Walkthrough and Explanation

Pseudo Selectors

Pseudo selectors in CSS are special keywords used to select specific elements in a web page based on their state or position in the document hierarchy. Pseudo selectors begin with a colon (😃, and they allow developers to apply specific styles to elements that cannot be selected by class or ID alone. For example, the :hover pseudo-selector is used to select an element when a user hovers over it with their mouse. Similarly, the :nth-child pseudo-selector is used to select an element based on its position in the hierarchy. Pseudo selectors can be a powerful tool for creating dynamic and interactive web pages, and they are widely used in modern web design.

`:hover`

In CSS, :hover is a pseudo-class selector that is used to target and apply styles to an element when the mouse pointer is hovering over it. When the user hovers over an element, the :hover selector allows you to change the appearance of that element. For example, you can change the background color, font color, font size, and other properties of a button when it is hovered over. The :hover selector is commonly used to create interactive and engaging user experiences on websites and applications.

Experiment with the Code

Try making the h1 element change color when you hover your mouse over it.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References

Learn2BuildApps