Question

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);经常0.1，它会淡化为0.2。

如何以简单的方式将“淡入”从预定义的$("#content").load($(this).text() + ".html");不透明度设置为完全不透明度？

编辑：CSS部分在第一页加载时加载，HTML部分稍后通过AJAX（{{1}}）加载。

Answer 1

你不能让孩子（img）透明度低于父母（#project），如果这是你想要的。

这根本不是jQuery或JavaScript相关的。

Answer 2

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

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

Answer 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>

我修改你的代码。现在看

Answer 4

试试这个 #project img { 不透明度：0.2; 向左飘浮; 保证金：10px; }

CSS不透明度0.2 - jquery设置不透明度1.0 - 但1.0最大值为0.2？

4 个答案: