How to use hover in css

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.

HTML code:

<button class="btn">按钮</button>

CSS code:

.btn {
  background-color: blue;
  color: white;
}

.btn:hover {
  background-color: red;
  color: white;
}

In the above code, .btn is the class selector of the button element, which defines the default style of the button. Then, in .btn:hover, we define the style of the button on hover.

2. Applications for different elements
In addition to being applied to general HTML elements, hover can also be applied to some other special elements. Below are several common usage scenarios and specific code examples.

1. Link
   We usually change the color of a link when the mouse hovers over it to remind the user that the link is clickable.

CSS code:

a:hover {
  color: red;
}

2. Picture
   When the mouse hovers over the picture, we can add some special effects to the picture, such as changing the transparency or zooming in or out.

HTML code:

<img class="img lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="图片">

CSS code:

.img {
  transition: all 0.3s ease;
}

.img:hover {
  transform: scale(1.1);
}

In the above code, the .img class defines the default style of the image. When the mouse hovers over the image, we use the :hover pseudo-class to set the transform attribute so that the image magnifies 1.1 times when hovering.

3. Navigation menu
   For the navigation menu, we usually add some animation effects when the mouse hovers to improve the user experience.

HTML code:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

CSS code:

nav ul li a {
  color: #333;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  color: red;
  transform: translateY(-5px);
}

In the above code, we set the mouse hover by adding the :hover pseudo-class for the a tag The style includes changing the color and offset it up by 5 pixels.

3. Conclusion
hover is a commonly used pseudo-class selector in CSS, which can help us change the style of elements when the mouse hovers. Through the introduction and code examples of this article, I hope it can help everyone better understand and apply the use of hover. In actual projects, everyone can use hover more flexibly to achieve rich effects according to their own needs and ideas.

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!