Interactive Effects: Hover and Focus States
When you want your website to feel lively and responsive, interactive transitions play a key role.
The :hover and :focus pseudo-classes are essential tools for creating effects that respond to user actions. The :hover pseudo-class targets elements when a user points to them with a mouse or similar device, while :focus targets elements that are currently selected, such as an input field a user has clicked into or navigated to with the keyboard.
By combining these pseudo-classes with CSS transition, you can smoothly animate changes in styles—like color, border, or background—whenever users interact with your buttons, links, or form fields.
index.html
styles.css
In this example, both the input field and the button start with a neutral border and background. The transition property on each element sets up a smooth animation for border-color and background changes, lasting 0.3 seconds. When a user hovers over the input or button with the mouse, or focuses on them using the keyboard, the corresponding pseudo-class (:hover or :focus) matches the element. The browser then animates the border color and background to the new values defined in the hover and focus rules.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 8.33Interactive Effects: Hover and Focus States
Svep för att visa menyn
When you want your website to feel lively and responsive, interactive transitions play a key role.
The :hover and :focus pseudo-classes are essential tools for creating effects that respond to user actions. The :hover pseudo-class targets elements when a user points to them with a mouse or similar device, while :focus targets elements that are currently selected, such as an input field a user has clicked into or navigated to with the keyboard.
By combining these pseudo-classes with CSS transition, you can smoothly animate changes in styles—like color, border, or background—whenever users interact with your buttons, links, or form fields.
index.html
styles.css
In this example, both the input field and the button start with a neutral border and background. The transition property on each element sets up a smooth animation for border-color and background changes, lasting 0.3 seconds. When a user hovers over the input or button with the mouse, or focuses on them using the keyboard, the corresponding pseudo-class (:hover or :focus) matches the element. The browser then animates the border color and background to the new values defined in the hover and focus rules.
Tack för dina kommentarer!
