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.
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>