If you've worked with CSS, then you know that styles apply to selectors, which in turn are HTML elements. But not always. There is a phantom class category that arises only in certain states of an object. For example, a pressed button or a selected input field. For such special cases, there are CSS pseudo-classes: focus,: hover,: active.
Dynamic pseudo-classes
CSS defines three dynamic pseudo-classes: focus,: hover,: active. They change the appearance of the object during certain user actions. This means that their appearance requires a prerequisite:
.button:hover{ border: 1px solid #333; } .button:active{ opacity: .5; }
In this example, until the user hovers over the element with the button class, the styles written in: hover will not appear.
Traditionally, pseudo-classes are used to handle links and buttons. But the range of possibilities is much wider. In CSS: focus refers to the web page object that owns the input focus. Most often these are fields of registration and search forms.
input[type="text"], input[type="email"]{ width: 300px; font-family: 'Gochi Hand', cursive; text-align: center; border: 0; outline: none; } input[type="text"]:focus, input[type="email"]:focus{ border: 0; }
: hover is responsible for the elements over which the pointer of the mouse or other device is placed. At the moment when the user activates some object on the page, for example, clicks on the link, the pseudo-class appears: active
Pseudo-Classes Possibilities
Styles for: active,: focus,: hover is a peculiar way of communicating with the user. So you tell where to enter data, underlines links, select elements by which you can click. With the help of successful effects, you motivate the visitor to enter an email address and subscribe to your newsletter. Thanks to the beautiful buttons "Login!", "Read more!" those who accidentally hit the page will want to travel further on the site.
But don't use pseudo-classes too hard. If you add: hover to almost all elements, visitors to your site may develop seasickness from a mass of increasing or blinking objects. Use CSS pseudo-class focus to change the color of the border of the fields, no more. The best way to correctly assign: hover is to make the font color darker on hover. But do not touch the size - neighboring elements may suffer from this.