为什么我的按钮的不透明度在悬停时没有变化？

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);
        });

看我的JS小提琴example。

在单击任何给定按钮时，该功能应该“灰显”表中的所有行（不包括单击按钮的行）。但是，在悬停时，任何按钮都应该是完全不透明的。

显然，该类匹配，因为“>”变为红色。

那么为什么悬停的不透明度不会变为100％？

Answer 1

2019年rgba更新

在回答这个问题7年后，使用rgba语法应该没有问题。它在所有主流浏览器中都受支持，并且已经有一段时间了。

Compatibility

原始答案

子元素只是其父元素不透明度的100％不透明度。在这种情况下，你的按钮在100％的0.3不透明度。我不知道如何在不使用rgb（,,,）（在IE中不起作用）的情况下知道如何执行此操作的唯一方法是让TD相对定位并将按钮设置为绝对定位。

编辑：

这也可以通过使用jQuery手动完成淡化每个元素而不是淡化父元素。

试试这个小提琴http://jsfiddle.net/cMx49/18/

Answer 2

1. 我认为你的测试用例被削减得太远了，因为我没有看到任何低于100％不透明的东西开始
2. 听起来你有乘法不透明的困扰。如果父元素是50％不透明而子元素是50％不透明，则结果是子项目将是25％不透明（0.5＆teims; 0.5）。如果将子项设置为100％不透明，则最终结果是子项将显示为50％不透明（0.5×1.0） 您不能将某些东西设置为“200％”不透明，因此您不能让半透明元素的后代比任何祖先更不透明。
3. 因此，要修复它，在悬停时将整行设置为完全不透明（如果你愿意，可以调暗<td>或其他元素：http://jsfiddle.net/cMx49/5/

Answer 3

我会推荐这样的东西。我重写了大量的javascript。

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