Change cursor to hand when a mouse hovers over a table row

CSS styling: Becoming fluent in Browser's body language

Let's explore more key aspects of cursor styling, how to apply it, and why it's an important element of user interface (UI) design.

Semantics and accessibility: Speak to all users

Incorporate the [role="button"] attribute in your CSS for more accessible styling. It provides semantic clarity, making our design inclusive even for assistive technology users:

tr[role="button"]:hover {
  cursor: pointer; /* Every line of code is a step towards universal design */
}


Centralized styling: The efficient way

To best manage styles, define a .clickable class in your style.css:

.clickable:hover {
  cursor: pointer; /* Look ma, no JavaScript! */
}


This approach fosters consistency and ease of maintenance across your project.

Performance over bloat: Keep it clean and light

Avoid inline styles like style="cursor: pointer;". Instead, opt to include the styling rules in an external stylesheet.

Not only does this improve performance, it also keeps our HTML clean, enhancing overall code readability and maintainability.

Cueing richer interactions

Building upon the cursor change, you can give additional visual feedback to the user. For example, coupling the cursor change with a background color change on hover:

tr:hover {
  cursor: pointer; /* "Handy" cues ahead */
  background-color: #f2f2f2; /* Because hover state deserves a bit of limelight */
}


This amplifies interaction, creating a more cohesive user experience.

The cursor wardrobe: Suit up for different interactions

CSS allows us to define various cursor styles like crosshair, e-resize, or move, serving unique visual cues based on the functionality of different interactive elements.

.draggable:hover {
  cursor: move; /* We like to move it move it! */
}
.resizable:hover {
  cursor: e-resize; /* Can't resize your window without me! */
}


Potential CSS hitches and their solutions

Let's touch upon potential issues to keep an eye on while implementing cursor changes:

Overriding nested elements

Some nested elements within tr could have their own hover styles that override the cursor property. The fix? Ensure the cursor property for your table rows takes precedence by being more specific:

table.sortable tr:hover {
  cursor: pointer; /* "Pointergate" - The issue that divided nested elements */
}


Making CSS and JavaScript play nicely

If you need JavaScript for interactive behaviors, always remember to synchronize it with your CSS changes. Let your CSS and JavaScript complement, rather than compete:

document.querySelector('.sortable').addEventListener('click', function(event){
  // Your click event logic here.
});


The browser compatibility caveat

Cursor: pointer; is widely supported by modern browsers. But it's good practice to always check for cross-browser compatibility. Sites like Can I Use are your pals here.