爲什麼我的按鈕的不透明度在懸停時發生變化？

<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提琴example。爲什麼我的按鈕的不透明度在懸停時發生變化？

該功能應該在點擊任何給定按鈕時「變灰」表中的所有行（不包括包含點擊的按鈕的行）。但是，在懸停時，任何按鈕都應該完全不透明。

很明顯，該類匹配，因爲「>」變成紅色。

那麼爲什麼盤旋不透明度不會變爲100％？

來源

2012-03-27 David Peden

子元素只會是其父元素不透明度的100％不透明度。在這種情況下，你的按鈕在0.3不透明度的100％。我知道如何在不使用rgb（,,,）的情況下執行此操作（在IE中不起作用）的唯一方法是讓TD相對定位，並將按鈕設置爲絕對定位。

編輯：

這也可以手動地與使用的jQuery做褪色每個元素而不是衰落母體。

試試這個小提琴http://jsfiddle.net/cMx49/18/

來源

2012-03-27 03:15:12

+1的快速回答解釋了我的問題。我打上Phrogz響應的答案，因爲它提供了一個解決方案。 – 2012-03-27 03:31:46

我個墨水我的小提琴更正確地找到你要找的東西。 – 2012-03-27 03:33:15

同意。感謝更新。它也適用於FF。 – 2012-03-27 03:50:54

我覺得你的測試用例被削減的太遠，因爲我沒有看到任何小於100％不透明開始與
這聽起來就像你對乘法不透明度感到困擾一樣。如果父元素爲50％不透明且子元素爲50％不透明，則結果是子項目將爲25％不透明（0.5,&teims; 0.5）。如果您將子項目設置爲100％不透明，則最終結果是子項目將顯示50％不透明（0.5 × 1.0）

您不能將某些內容設置爲「200％」不透明，因此您無法有一個半透明元素的後代永遠比任何祖先都更不透明。
因此，爲了解決這個問題，懸停設置整個行來完全不透明（如果你喜歡，暗淡下來的<td>或其他元素：http://jsfiddle.net/cMx49/5/

來源

2012-03-27 03:17:43 Phrogz

事實證明，這個答案只有部分工作（在FF中沒有工作），並沒有嚴格地符合我的標準（儘管如果它是跨瀏覽器兼容的，我會發現該解決方案是可以接受的）。感謝你的回答。 – 2012-03-27 03:52:19

我會推薦這樣的事情我修改了JavaScript的一個很好的協議。

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

來源

2012-03-27 03:25:24 mikevoermans

爲什麼我的按鈕的不透明度在懸停時發生變化？

回答

相關問題