Vladimir Litovkin Vladimir Litovkin - 3 months ago 14
CSS Question

Applying cursor:pointer with button vs button:hover

I was wondering whether using

button {cursor: pointer}
has some downsides or reasons not to do it instead of
button:hover {cursor: pointer}
?

I feel really dirty typing
button
instead of
button:hover
, so I want to make sure I'm not doing anything bad.

Answer

There is no real difference between the two and no problems that could come to mind. If you load up the HTML below, you can see that even if there's a hover effect used the cursor change to a pointer exactly the same as if it didn't use a transition (which is the only effect I could imagine it having). If you prefer to use :hover then you can; however it is good practice to minimise the code you write in anything.

  <html>

<head>
    <title>Pointer</title>
</head>

<body>

    <button class="pointer">Pointer</button>
    <button class="hoverPointer">Hover Pointer</button>
</body>

<style>
    .pointer {
        cursor: pointer;
    }

    .hoverPointer:hover {
        -webkit-transition: 2s;
        transition: 2s;
        cursor: pointer;
        background-color: aqua;
    }

</style>

</html>