TEST1 ...">

Why isn't my button opacity changing?

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


    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */


    $("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%?


source to share

3 answers

2019 Update rgba

You should have no problem using the syntax rgba

7 years after answering this question. It is supported in all major browsers and has been around for a while.


Original Answer

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


It can also be done manually using jQuery to fade out each element rather than fade out the parent element.

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



  • I think your test case was too stripped down as I can't see anything less than 100% opaque to start with

  • It sounds like you are concerned about multiplicative opacity. If the parent is 50% opaque and the child is 50% opaque, the result is that the child is 25% opaque (0.5, etc., 0.5). If you set the child to 100% opaque, the end result is that the child appears to be 50% opaque (0.5 x 1.0)

    You cannot set anything to "200%" opaque, and therefore you will never have a child of a translucent element, ever more opaque than any parent.

  • So to fix it, hover over the entire opacity of the entire line (and scale down <td>

    or other elements if you like : http://jsfiddle.net/cMx49/5/



I would recommend something like this. I have processed a lot of javascript.




All Articles