How to change the mouse style in css

Implementation method: 1. Use the ":hover" pseudo-class selector to select the element on which the mouse pointer is floating and set its style. The syntax is ":hover{attribute name:attribute value}" ; 2. Use the transition attribute with the syntax "transtion:css attribute name transition time;".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Use pseudo-classes to achieve style switching
Pseudo-classes are a new feature that appeared in CSS2.1, allowing many effects that originally required JavaScript to be achieved using CSS. .
For example, to achieve the following mouse hover effect, just apply a new set of styles to the :hover pseudo-class. When the visitor moves the mouse over the button, the browser will automatically apply this new style to the button.

     
  盼望着，盼望着  

Effect:

#2. Use the transition function of CSS3 to achieve color transition
Use pseudo-classes directly Although the style change has been achieved, it will look very stiff because there is no transition effect. In the past, if you wanted to achieve transition, you needed to use a third-party js framework to achieve it. Now you only need to use the transition function of CSS3 to smoothly switch from one set of styles to another.
After the mouse is moved in below, the button background color will slowly turn yellow. When the mouse leaves, the transition effect will occur again and the color will return to its original state.

     
  盼望着，盼望着  

Effect:

Recommended learning:css video tutorial

The above is the detailed content of How to change the mouse style in css. For more information, please follow other related articles on the PHP Chinese website!