Почему прозрачность моей кнопки не меняется?

Question

<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%?

Answer 1

Элементы-дети будут представлять собой непрозрачность их родительских элементов на 100%. В этом случае ваша кнопка в 100% от непрозрачности 0.3. Единственный способ, которым я знаю, как это сделать, не используя rgb (,,,) (который не будет работать в IE), должен располагать TD относительно и установить кнопку, которая будет установлена ​​абсолютно.

EDIT:

Это также можно сделать вручную, с использованием JQuery исчезать каждый элемент, а не угасание родителя.

Попробуйте эту скрипку http://jsfiddle.net/cMx49/18/

Answer 2

1. Я думаю, ваш тест был урезанный слишком далеко, так как я не вижу ничего, что меньше, чем 100% непрозрачным, чтобы начать с

2. Это звучит например, вы обеспокоены мультипликативной непрозрачностью. Если родительский элемент непрозрачен на 50%, а дочерний элемент на 50% непрозрачен, результатом является то, что дочерний элемент будет непрозрачным на 25% (0,5 &teims; 0,5). Если вы установите дочерний элемент на 100% непрозрачным, конечным результатом будет то, что дочерний элемент будет выглядеть на 50% непрозрачным (0,5 × 1,0)

   Вы не можете установить что-либо на «200%» непрозрачное, и поэтому вы никогда не сможете имеют потомство полупрозрачного элемента, когда-либо более непрозрачного, чем любой предок.

3. Таким образом, чтобы исправить это, при наведении курсора мыши установить всю строку, чтобы прийти к полной непрозрачности (и если вы хотите, тусклый вниз <td> или другие элементы: http://jsfiddle.net/cMx49/5/

Answer 3

Я бы рекомендовал что-то вроде этого . Я переделал много в JavaScript.

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