Why doesn't my button's opacity change on hover?

Question

<div id="jobs">
    <table>
        <tbody>
            <tr id="test1">
                <td>TEST1</td>
                <td><button data-job="test1">&gt;</button></td>
            </tr>
            <tr id="test2">
                <td>TEST2</td>
                <td><button data-job="test2">&gt;</button></td>
            </tr>
        </tbody>
    </table>
</div>

button:hover
{
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    color:red;
}

    $("button").click(function () {
        var animationDuration = 500;
        var job = $(this).data("job");
        var selectedRow = document.getElementById(job);
        $("#jobs").find("tr").not(selectedRow).fadeTo(animationDuration, .3);
        $(selectedRow).fadeTo(animationDuration, 1);
        });

See my JS Fiddle example.

The functionality is supposed to "grey out" all rows in the table (excluding the row containing the clicked button) upon clicking any given button. However, on hover, any button should be fully opaque.

Clearly the class matches because the ">" turns red.

So why does the hovered opacity not change to 100%?

Answer 1

2019 rgba Update

You should have no problem using rgba syntax 7 years on from answering this question. It is supported in all major browsers and has been for a while.

Compatibility

Original Answer

Child elements will only be 100% opacity of their parent elements opacity. In this case your button in 100% of 0.3 opacity. The only way I know how to do this without using rgb(,,,) (which won't work in IE) is to have the TD positioned relatively and set the button to be positioned absolutely.

EDIT:

This can also be done manually with the use of jQuery to fade each element rather than fading the parent.

Try this fiddle http://jsfiddle.net/cMx49/18/