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.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 8.33Interactive Effects: Hover and Focus States
Stryg for at vise menuen
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.
Tak for dine kommentarer!
