Question

So, I have a DIV full of four HTML buttons that use an image instead of any text. Using CSS, I style it so that the img is the same width as its parent button. On three of the four buttons, they will always carry the cursor: pointer attribute because they will always be clickable. The fourth button, however, will occasionally be in a state in which it is disabled, so I have to toggle the CSS between cursor: pointer and cursor: default.

As my code stands, this works properly in Chrome and IE 7/8/9 (6 is not in my supported audience), however Firefox does not change cursor from default for any of them, regardless of if one of the buttons are disabled. Note that while this does work when I apply the cursor attribute to the parent BUTTON element, I’d prefer to use CSS to have the cursor change rather than use any client-side Javascript. Since this works in two of the three modern browsers I’m testing (including IE7, mind you!), I thought it should be possible in FF too.

Here’s the HTML markup that I have:

<button id="btn1" class="my-button"><img src="/path/to/my-img1.gif" alt="Img1" /></button>
<button id="btn2" class="my-button"><img src="/path/to/my-img2.gif" alt="Img2" /></button>
<button id="btn3" class="my-button"><img src="/path/to/my-img3.gif" alt="Img3" /></button>
<button id="btn4" class="my-button"><img src="/path/to/my-img4.gif" alt="Img4" /></button>

And here are the CSS classes that I have designated for this markup, as well:

<style>
    .my-button {
    display: block;
    float: left;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    border: none;
    background: none;
    }

    .my-button img {
    cursor: pointer;
    }

    .my-button img .disabled {
    cursor: default;
    }
</style>

And for anyone with any of that pesky curiosity, all of the click events and action is handled with jQuery depending on whatever business logic I need to go with it and the surrounding page.

If there’s more information that I can furnish, please let me know. I feel like I came across a Firefox stumbling block here.

Edit: For reference, I’m using Firefox 4.0 with Firebug installed. Same behavior whether I have a Firebug on for that tab or not. Chrome is up-to-date, currently at version 10.0.648.204.

Edit 2: As I’ve denoted in the comments below, I still have not figured out a solution to this issue, but have settled on using @wdm’s answer as a temporary solution – this way Firefox gets cursor: pointer set for all buttons regardless of state, and Chrome and IE will obey the CSS I put forth for the embedded img in each button tag. If I find out what’s going on in my code or if someone else finds a proper solution for Firefox, I’ll move the answer there. Thanks again for the suggestions!

Answer 1

Have you tried?

.my-button {
    cursor: pointer;
}

EDIT: You could also make a separate class with “cursor:pointer” and use jQuery’s .addClass() .removeClass() depending on the state. Or have jQuery directly alter the css with

.css("cursor", "pointer");

EDIT: One more idea…

button {
    cursor: pointer;
}
button:disabled {
    cursor: default;
}

Seems to be working for me in all major browsers.