How to use hover in css

In CSS, :hover is a pseudo-class selector used to select the element the mouse pointer is hovering over. You can use :hover to apply some style changes when the user hovers over an element.

The following is a simple example that demonstrates how to use :hover to change the color of a link:

a {  
  color: blue;  
}  
  
a:hover {  
  color: red;  
}

In this example, when the user hovers over a link , the link's color will change to red. When there is no mouseover, the color of the link is blue.

In addition to changing colors, you can also use :hover to apply other style changes, such as background color, border style, font size, and more. Here is a more complex example:

button {  
  background-color: lightgray;  
  border: none;  
  padding: 10px 20px;  
  font-size: 16px;  
}  
  
button:hover {  
  background-color: gray;  
  color: white;  
  border: 2px solid white;  
  font-size: 18px;  
}

In this example, when the user hovers over a button, the button's background color will change to gray, the text color will change to white, and the border will turns white, and the font size will increase to 18 pixels.

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!