Geek Answers Handbook

Should the cursor property be defined in '.class' or '.class: hover'?

Since both values ​​have the same effect:

.class { cursor:pointer; } .class:hover { cursor:pointer; }

As for the best practices you should use and why?

+6
source share
3 answers

The two selectors are designed for completely different purposes, despite the fact that, at least in practice, they seem to do the same thing.

I would say that to determine the state of hovering :hover (at least on devices without a touch screen, see below) would be best practice because:

  • This makes finding and understanding your style more visible in large CSS blocks.

  • It uses a specially assigned selector (which can be extended in the specification later, what will happen to your functionality then?)

  • If you later add a default style for .class , your states are clearly separated accordingly

  • What happens if you transfer the responsibility of your CSS to another person? Having :hover defined functionality defined under the correct selector greatly simplifies code understanding.

  • If you have more complex CSS, you will probably use :hover elsewhere, so it should be used for consistency purposes

  • Two selectors represent the same element, but in different states you should semantically use :hover

But wait a minute. , you may notice that if you set the cursor style for a to default , then the usual hand icon will not appear when you hover ... this indicates that there is preliminary evidence not specifically for the styles :hover ( see this in action here )

In general, there is no reason to break the game, not to use just .class in some cases - it, of course, uses fewer bytes, and if you have a fairly simple setup, then only when developing by you ... then why not, but be careful, best avoided if you want to adhere to strict rules and better support ongoing development.

In addition, do not forget touch screen devices MDN makes an important point here

on touch screens: freezing is problematic or impossible. Parameter: hover pseudo-class never matches or corresponds to a short moment after touching an element. Since touch screen devices are very common, it is important that the web developer does not have access to the content only when it hangs over it, since this content will be hidden to users of such devices.

As such, depending on your requirement, it might not be better to use :hover , as if you used it in your CSS for a touch-screen device, which it may bake depending on unsupported or poor functionality.

+6
source

IE6 and below only recognize the :hover pseudo- :hover in a tags. :hover on a div or other tag will not be interpreted by these browsers.

If compatibility is a consideration, use :hover else, I believe there is no difference.

+1
source

Firstly, for your “same effect” it depends on what you are referring to. Since some items by default have a cursor: pointer property, such as

anchor tag

While the following items by default have a "cursor: default" (no pointer)

Input Type: send

Take stackoverflow.com "Send your answer" as an example, this is the submit button with a "cursor: default" by default, the user perception may seem like a clickable object displays a "pointer", so it has a style of "cursor": pointer "

As a quick conclusion with my experience, there is no best practice, but rather depends on the goal. For an object with a click, but by default it does not appear as a "pointer", you can create them using the "pointer". When you have disabled something, for example, when you activate something, enable the binding, you can use something like

 /* the a is only for illustrative purpose */ a.disabled{ cursor: default; } a.enabled{ cursor: pointer; }

Because the cursor is a visual presentation issue related to user interface (UX) design.

0
source

More articles:


All Articles