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

【问题标题】：Why doesn't my button's opacity change on hover?为什么我的按钮的不透明度在悬停时没有改变？
【发布时间】：2012-04-10 14:11:05
【问题描述】：

<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 Fiddle example。

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

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

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

【问题讨论】：

标签： css button hover opacity

【解决方案1】：

2019 rgba更新

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

Compatibility

原答案

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

编辑：

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

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

【讨论】：

+1 快速回答解释了我的问题。我将 Phrogz 响应标记为答案，因为它提供了解决方案。
我认为我的小提琴做的更正确。

【解决方案2】：

我认为你的测试用例被削减得太多了，因为我没有看到任何一开始就低于 100% 不透明的东西
听起来您遇到了乘法不透明度问题。如果父元素是 50% 不透明而子元素是 50% 不透明，则结果是子项将是 25% 不透明 (0.5&teims;0.5)。如果将子项设置为 100% 不透明，最终结果是子项将显示为 50% 不透明（0.5×1.0）

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

【讨论】：

事实证明，这个答案仅部分有效（在 FF 中无效）并且不严格符合我的标准（尽管如果它符合跨浏览器，我会发现分辨率可以接受） .感谢您的回答。

【解决方案3】：

我会推荐这样的东西。我重写了很多 javascript。

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

【讨论】：