7

I was aking my self this question: What are the differences, if there are, about having the property cursor: pointer; always or just in the :hover ?

Take this snippet:

.test{
  cursor: pointer;
}
<span class="test">Hover me

and this other snippet:

.hoverme:hover{
  cursor: pointer;
}
<span class="hoverme">Hover me</span>

both do the same thing: setting up the cursor icon. But is it really necessary to put this property (the cursor's property) in the hover?

I mean, logically has more sense to put it in the hover, but I don't get it.

Obviously if I have to change the background on hover this example answer itself. But what about my question?

Jacopo Sciampi
  • 2,990
  • 1
  • 20
  • 44
  • 3
    I'd say it just make more sense semantically to use it on hover. The same way that `` and `` produce the same visual result, but are quite different in meaning. Btw, I was asking myself this very question. Right now I am reading about it and trying to find some definitive answer/guide. Until then, I will always use it on hover. – nemanja Nov 27 '18 at 15:54
  • @NemanjaGlumac thank you for your answer. I tried to search on google but sadly I didn't find anything relevant about that. – Jacopo Sciampi Nov 27 '18 at 16:11
  • The only thing I can think of that makes a difference would be the small performance hit of having an extra rule.. but unless you have 1000 different classes, each with a :hover that ONLY has cursor. I don't see performance being an issue. So, semantically it makes sense to use it on :hover and also... your :hover PROBABLY has other stuff too. Sadly I don't have enough reference or evidence to make this an actual answer. But I guess TL:DR "Performance.. Maybe?" – Keeghan McGarry Nov 27 '18 at 16:26
  • I would say that `:hover` is already part of cursor behaviour so you don’t need to specify it in CSS for cursor behaviour. Only use `:hover` for styles that need to change on the element itself, when the cursor is over it. – Kokodoko Nov 27 '18 at 16:27
  • I have found this answer on Quora. (https://www.quora.com/What-is-the-difference-between-someclass-cursor-pointer-and-someclass-hover-cursor-pointer-while-both-effects-are-the-same/answer/Marty-Naselli). Even it has some effect on performance, it's definitely insignificant. I couldn't find anything other than "pereference/opinion based" info anywhere online. Good question, tho. – nemanja Nov 27 '18 at 17:40
  • 2
    I get a slight visual difference between the two in my browser (Google Chrome Version 70.0.3538.102 on Mac OSX 10.13.2). For the snippet that applies the style on hover, the cursor is the same that it would be on normal text for just a moment before changing. I don't have that effect on the first snippet. – Christopher Bradshaw Nov 27 '18 at 17:42
  • 1
    @ChristopherBradshaw that's true. I also noticed that – Jacopo Sciampi Nov 27 '18 at 18:57
  • @KeeghanMcGarry the difference is clear when using custom cursor (check the duplicate) – Temani Afif Nov 27 '18 at 19:34

1 Answers1

-3

Visually, there are no differences. However, there are some cases that make cursor: pointer; very useful. The cursor: pointer; is useful in cases, for a better user experience, you need it to change to a pointer. For example: if you have a button element in your HTML and you hover over it, your cursor will not change by default. But if you add the cursor: pointer; to that element in your CSS along with the :hover, it can improve user experience by encouraging interaction with the element.

Nicholas Thurston
  • 1
  • 1
  • I appreciate your answer but It's kinda off-topic. I know that the pointer is more user-friendly, I was just wondering if there are some importan differences having this property setted only on hover or always – Jacopo Sciampi Nov 27 '18 at 16:18
  • I think that really depends on what element you're working with. You'll get the same effect with either option. – Nicholas Thurston Nov 27 '18 at 16:22
  • Infact, having some other properties on hover (IE: background color different) is something different – Jacopo Sciampi Nov 27 '18 at 16:22