Why isn't my button opacity changing?

<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 example JS script.

The functionality is expected to "gray" all rows in the table (excluding the row containing the pressed button) when any button is pressed. However, any button should be completely opaque on hover.

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

So why doesn't the changed opacity change to 100%?