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。

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

显然，班级匹配，因为“＆gt;”变红了。

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

Answer 1

2019 rgba更新

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

Compatibility

原始答案

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

编辑：

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

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

Answer 2

我认为你的测试用例被削减得太过分了，因为我没有看到任何低于100％不透明的东西
听起来你对乘法不透明感到困扰。如果父元素是50％不透明而子元素是50％不透明，则结果是子项目将是25％不透明（0.5＆amp; teims; 0.5）。如果将子项设置为100％不透明，则最终结果是子项将显示为50％不透明（0.5×1.0）

你不能将某些东西设置为“200％”不透明，因此你不能让半透明元素的后代比任何祖先更不透明。
因此，要修复此问题，请在悬停时将整行设置为完全不透明（如果您愿意，可以调暗<td>或其他元素：http://jsfiddle.net/cMx49/5/

Answer 3

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

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

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

3 个答案: