Css 为什么'；t我的按钮'；悬停时的不透明度变化？

看我的小提琴

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

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

---

那么为什么悬停的不透明度没有变为100%？

2019

rgba

Update

从回答这个问题起7年后，使用

rgba

语法应该没有问题。它在所有主要浏览器中都受支持，并且已经有一段时间了

原始答案

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

编辑：

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

试试这把小提琴

我认为您的测试用例被削减得太少了，因为我没有看到任何不到100%不透明的东西

听起来你好像有乘法不透明的问题。如果父元素为50%不透明，而子元素为50%不透明，则结果是子项将为25%不透明（0.5&teims；0.5）。如果将子项设置为100%不透明，最终结果是子项将显示为50%不透明（0.5×1.0）

不能将某个对象设置为“200%”不透明，因此半透明元素的后代也不能比任何祖先更不透明

因此，要解决此问题，请在悬停时将整行设置为完全不透明度（如果愿意，请将

或其他元素调暗：

---

我会推荐这样的东西。我修改了很多javascript

---

+1对于解释我问题的快速答案，我将Phrogz response标记为答案，因为它提供了一个解决方案。我认为我的小提琴能更准确地完成您所寻找的内容。结果表明，该答案仅部分有效（在FF中不起作用），并且不完全符合我的标准（虽然如果它是跨浏览器兼容的，我会发现它是可以接受的）。谢谢你的回答。

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