CODEWITHSUNDEEP
cssbuttonhoveropacity
David Peden
David Peden

Reputation: 18464

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

<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%?

Upvotes: 3

Views: 2550

Answers (3)

James Hay
James Hay

Reputation: 7325

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/

Upvotes: 4

mikevoermans
mikevoermans

Reputation: 4007

I would recommend something like this. I reworked a good deal of the javascript.

http://jsfiddle.net/cMx49/14/

Upvotes: 0

Phrogz
Phrogz

Reputation: 303490

  1. I think your test case was pared-down too far, as I do not see anything that is less than 100% opaque to begin with

  2. It sounds like you're having troubled with multiplicative opacity. If a parent element is 50% opaque and a child element is 50% opaque, the result is that the child item will be 25% opaque (0.5&teims;0.5). If you set the child item to be 100% opaque, the end result is that the child item will appear 50% opaque (0.5×1.0)

    You cannot set something to "200%" opaque, and so you cannot ever have a descendant of a semi-transparent element ever be more opaque than any ancestor.

  3. Thus, to fix it, on hover set the entire row to come to full opacity (and if you like, dim down the <td> or other elements: http://jsfiddle.net/cMx49/5/

Upvotes: 3

Related Questions