CSS: hover. Original hover effects

The idea of ​​separating the presentation of information from the code of its creating and processing has become radically new. It was a strong decision at the time, but this moment was not fully recognized then. When programming was separated from a single computer, but did not win in the local network or a separate domain zone, and immediately spread everywhere, only then it became obvious that the presentation of information (in terms of design) and work with it (in terms of code) were two sides in one plane.

Three facets of site building

From a formal point of view, there are three main components (in different syntactic forms) that make up a site: PHP code, JavaScript code, and CSS style descriptions. It doesn’t matter at all how this component is named and which version, which version of HTML markup is used, and which version of the browser is used. Nowadays, compatibility is not held in high esteem, therefore it is relevant at every moment of time: what is encoded and what of what is encoded can be displayed and executed .

Previously, languages ​​fought for ideas, but today, manufacturers of standards in the field of Internet technologies and browsers prefer to fight empty-handed.

Personal and public

There are many tools through which the Internet is available (computers, laptops, tablets, smartphones), and there are plenty of browsers. There is no guarantee that a single device will display the site in the form in which it was created by the developer. The efforts of the latter do not always reach the goal and provide web design with a single multifaceted character, that is, with the unity of displaying the entity wherever it opens to the visitor.

Separating the personal and the social, using in the latter only what works, one can achieve noticeable success in design. Beauty, artistic moment and web design are the destiny of the corresponding specialists and talents. CSS is code, albeit very peculiar. His concern is to describe styles (information display options). With the advent of mobile devices, CSS was loaded with real coding in the form of media queries. So the option of re-marriage between design and code is not as unrealistic as it seemed just a couple of years ago.

css hover

The developer, engaged in the development of CSS styles, relies on his personal proven experience and on those CSS designs that work on most browsers, satisfy most site visitors. You should make the most of the first and the least of the second, then there is a much greater chance of getting a result that works almost always and everywhere.

First rule: hope for a standard, but don’t be a bad guy yourself

CSS: hover - this is when the mouse "went" to the page element. When the mouse clicked on an element, it becomes active, but when the cursor moves to the side, it can again change and show itself in an active state. “: Hover”, “active” and “visited” are the most requested pseudo-classes in describing styles.

It’s very convenient in the site code not to care about such trifles as mouse movement over elements. Providing two descriptions in the style sheet:

element {

color: black;


element: hover {

color: white;

background-color: green;


When you hover over an element, we will automatically change the text color from black to white and change the background of this element to green. Pseudo-classes can be applied to any element and achieve a variety of visual effects.

Web design

The second rule: trusting standards, focus on your code

Everything would be fine if progress remained at the level of computers and laptops equipped with mice, and progress in cellular communications did not lead to the appearance of smartphones, tablets, and other mobile devices to which connecting such a device is very problematic.

On the other hand, only on gadgets equipped with a special touch screen does manipulation of the fingers directly on the touch screen become available, as has already become usual on smartphones, tablets and similar devices.

There is a significant difference: hover here does not work at all as we would like. You can’t do without a code, and the use of media queries does not solve all the issues.

button hover css

Compatibility is too expensive a pleasure in the modern information world, therefore, in order to ensure proper functionality of the site within the established requirements for web design and implementation of functionality, it is preferable to focus on the minimum necessary use cases: CSS hover, CSS hover focus, CSS hover active (visited) . The more code (both inside the browser and on the server) controls web design, the better. A program is a control, it is better when this control is not at the mercy of current standards, from which you often do not know what to expect.

css style hover

Buttons and other page elements

Button hover CSS is a wonderful solution, but by and large every page element is a “button”. The site should be live, first of all, and if it is not laid down in the code, if the task is to create a site that develops appropriately for the scope and operates taking into account the behavior of the visitor, then at least using CSS styles you can add vibrance to the elements of the page.

hover effects

Using hover effects is convenient. With their help, you can easily make the pages lively, but the code does not know what the mouse does on the screen if it is not possible to track its movement. From this point of view, that is, when the code controls the movement of the mouse (= the movement of a finger on a smartphone), it can independently highlight an element or transform it. This has nothing to do with pseudo-classes, but gives full control of the code over the appearance of the page, allows it to be adequately displayed on various devices in different browsers.

Pitfalls in style sheets

It is impossible to say that the standard in the field of describing CSS styles do not know what they are doing, but it is also impossible to say that they fully interact with other standards in the field of Internet programming.

Styles and pseudo-classes can be described at the page encoding stage, at the moment when the server forms the page and in dynamics: already inside the browser, you can easily create a new style and change the existing one.

Using AJAX, when there is no need to re-generate the page to display the reaction to the visitor’s action, but simply changing its element or several elements adds a little “pepper”. The “friendship” of codes is that already in the browser (JavaScript) and that on the server (PHP) is the lot of the author (programmer) of the site.

css hover focus

From how the algorithm of this interaction will be executed, not only the display of its elements on the page substantially depends, but also their further perception by the code. Simply put, pseudo-classes (in particular) are very good for statics, sort of like for a sailing yacht in the clear sea with a light wind - everything is obvious, accessible and manageable. If the weather changes, or when the wind intensifies, or if a visitor causes an unforeseen situation, you can quickly fly into a reef and lose a visitor.

Standard and its emulation

CSS style hover can be emulated using JavaScript, using the onmouseover and onmouseout events. Often this all ends. From the standpoint of common sense, when it comes to creating a really working site, it is better to keep control in your hands than to give it to the mythical standards that change beyond the will and desire of the developer.

Sometimes you can read something like “this feature is available even in IE”, but more often you can read about what style descriptions are perceived by one browser or another. Much less often you can learn about how JavaScript differs in certain browsers.

css hover active

Evaluating the accumulated experience, admiring the capabilities of Chrome and Opera, criticizing the slowness and inertness of the browser from the manufacturer (unforgettable, dear to every Microsoft IE programmer: “Good old Internet Explorer did not scold only lazy. Or the one who is on the computer only knows how to play the “Scarf” ”, - quote from an unknown Internet author), you should adhere to the middle ground : use what works everywhere and always.

People need the means to work, when they need to get the thrill they usually go to the registry office or theater, but not to the Internet.

Emulation and control

Previously, when programming got on its feet, it was customary to listen to the elders and write correctly. Today there are too many elders, everything changes too quickly, and if you listen to everyone, then there will not be enough time even for a very simple job, for a minimally functional site.

Programming is primarily control, and in cases where the standard implicitly sets the rules, or you can expect a sharp change in the rule, its elimination and the appearance of a new one, the best decision was always not to make any decisions, but to implement the required site functionality with the least possible, but really working code .

Source: https://habr.com/ru/post/A11483/

All Articles