CODEWITHSUNDEEP
csshover
Patrik Krehák
Patrik Krehák

Reputation: 2683

Apply hover cursor style to element or its :hover

I have no problem with anything, I was just curious, what is better to use, when you want to change cursor while hovering. What would you prefer?

Method 1:

.element {
    cursor: pointer;
}

Method 2:

.element:hover {
    cursor: pointer;
}

Both will do same - change your cursor to pointer when you hover .element. But, is there any difference between these 2 methods? Will it have any effect on browser (ie. performance) when using method 1 instead of method 2? I'm just curious.

Upvotes: 1

Views: 251

Answers (1)

Joundill
Joundill

Reputation: 7533

There's no real difference. I would tend to put the style in where it looks best stylistically. It makes sense in the following example to have cursor:pointer in the :hover part as .clickable is only differently styled (i.e. has a blue background) on hover. Otherwise, I'd suggest having it in the regular .clickable selector.

HTML:

<span class="green-bg">Span 1</span>
<span class="green-bg clickable">Span 2</span>
<span class="green-bg">Span 3</span>

CSS:

.green-bg {
    background: green;
}
.clickable:hover {
    background: blue;
    cursor: pointer;
}

Upvotes: 2

Related Questions