CSS 不透明度 0.2 - jquery 设置不透明度 1.0 - 但是 1.0 将最大为 0.2？答案

【问题标题】：CSS opacity 0.2 - jquery set opacity 1.0 - But 1.0 will be maximum of 0.2?CSS 不透明度 0.2 - jquery 设置不透明度 1.0 - 但是 1.0 将最大为 0.2？
【发布时间】：2013-07-14 15:03:31
【问题描述】：

Smoetimes 我讨厌 CSS，更重要的是 javascript（在本例中是 jQuery）。我有以下内容：

#project {
    opacity: 0.2;

    float: left;
    margin: 10px;
}

在我的 HTML 中，我得到了：

<script type="text/javascript">
    $('#project img').hover(function() {
        $(this).fadeTo("slow", 1);
    });
</script>

<div id="project">
    <div id="img"><img src="..."></div>
    <p>Title:</p> ...
</div>

但由于某种原因，我无法淡入 1.0，因为 1.0 是我的 CSS 文件中设置为 0.2 的不透明度的最大值。如果我这样做 fadeTo("slow", 0.5); conequently 它会褪色到 0.1。

我如何以简单的方式将“淡入”动画从预定义的 0.2 不透明度变为完全不透明度？

编辑：CSS 部分在第一个页面加载时加载，HTML 部分稍后通过 AJAX ($("#content").load($(this).text() + ".html");) 加载。

【问题讨论】：

如果你想要的话，你不能让子 (img) 的透明度低于父 (#project)。
您将#project 设置为opacity:0.2 但不是image 不透明度，因此将鼠标悬停在图像上不会执行任何操作。
刚刚想通了。我正在尝试将img 不透明度设置为1.0，但父div 是具有不透明度的那个.. 天哪，我很愚蠢..

标签： jquery html css animation opacity

【解决方案1】：

如果你想要的话，你不能让子项 (img) 的透明度低于父项 (#project)。

这根本与 jQuery 或 JavaScript 无关。

【讨论】：

是的，你明白了 :) 只要我把它标记为已解决，你就会得到分数。 Gha 已经为此工作了几个小时，就在我写这个问题时，我自己也注意到了 >_

【解决方案2】：

The opacity of a child element cannot "override" the opacity of its parent element.

如果可行，您可以为#project 使用rgba() 颜色为color 和background-color 属性指定不透明度。 alpha 属性不会被后代元素继承为不透明度。

【讨论】：

【解决方案3】：

看这个小提琴。

Fiddle

会有帮助的。

像这样改变 Css ：

#project img{
    opacity:0.2;

    float: left;
    margin: 10px;
}

代码：

<script type="text/javascript">
    $(document).ready(function() {

        $('#project img').hover(function() {
            $(this).fadeTo("slow", 1);
        });
    });
</script>

<div id="project">
    <div id="img"><img src="..."></div>
    <p>Title:</p> ...
</div>

我修改了你的代码。现在看看

【讨论】：

【解决方案4】：

试试这个 #项目img { 不透明度：0.2；向左飘浮; 边距：10px； }

【讨论】：

这会起作用，但父 div 仍然是不透明的，这不是我的目标 :)