Navigation hyperlinks only work when mouse is on the text

Question

My navigation button looks different when I mouse over, as it should, though the pointer cursor does not appear until I mouse over the text which is not what I want. I want the

Answer 1

You should apply these styles to .navButton a instead as those are the hyperlinks (but also keep display: inline-block on .navButton for their inline arrangement):

.navButton {
    display: inline-block;
}

.navButton a {
    /* ... */

    display: block; /* Replace inline-block with block */

    /* ... */
}

.navButton a:hover {
    /* ... */
}

.navButton a:active {
    /* ... */
}