In fact, most times when an element is being clicked with a mouse, all three conditions are valid - the mouse if over the element, the element is in focus, and the element is being activated. One thing you may have noticed is that the conditions in which each of these pseudo-classes can be applied are not mutually exclusive.
And again, it doesn’t apply at all in the mobile Safari browser. On mobile devices 📱, like the :focus pseudo-class, the :active pseudo-class applies on the tap of the element. The :active pseudo-class works in the same way for mouse and keyboard ⌨️ interactions. If you hover your mouse over the button below, you’ll see that it turns yellow. The :hover pseudo-class, also called the “pointer hover pseudo-class”, applies when a pointing device interacts with an element without necessarily activating it.Ī typical example of this is when a mouse 🐭 hovers over an element.
With the range in input devices we have today, these pseudo-classes also behave slightly differently depending on if the user is interacting with the element with a mouse 🐭, keyboard ⌨️, or touchscreen 📱, which can make it difficult to know how and when to style these situations. They each correspond to a very specific point in how a user will interact with an element on a page such as a link or a button or an input field. :hover, :focus, and :active are pseudo-classes that are determined by a user’s actions. With pseudo-classes, we can select elements using information that isn’t already in the DOM and can change based on how a user interacts with the page. class or #id, we’re using predefined and unchanging attributes that are baked into the DOM.
0 kommentar(er)
