CSS不透明度0.2 - jquery set opacity 1.0 - 但1.0最大值爲0.2？

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不透明轉變爲完全不透明？

編輯：CSS部分在第一頁加載時加載，HTML部分通過AJAX（$("#content").load($(this).text() + ".html");）稍後加載。

Answer 1

你不能讓孩子（img）比父母（#project）透明，如果這是你想要的。

這根本不是jQuery或JavaScript相關的。

Answer 2

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

如果可行，您可以指定使用rgba()顏色你的#project不透明度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> 

我修改code.Now看到

Answer 4

試試這個 ＃工程IMG { 不透明度：0.2; float：left; margin：10px; }