css - que - soluciones para evitar la contaminacion por automoviles

¿Por qué la opacidad de mi botón no cambia al desplazarse?

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);
        });

Ver mi ejemplo JS Fiddle.

Se supone que la funcionalidad "desactive" todas las filas de la tabla (excluyendo la fila que contiene el botón al que se hizo clic) al hacer clic en cualquier botón. Sin embargo, al desplazarse, cualquier botón debe ser completamente opaco.

Claramente, la clase coincide porque el ">" se vuelve rojo.

Entonces, ¿por qué la opacidad suspendida no cambia al 100%?

Answer 1

1. Creo que su caso de prueba se redujo demasiado, ya que no veo nada que sea menos del 100% opaco para empezar

2. Parece que estás teniendo problemas con la opacidad multiplicativa. Si un elemento principal es 50% opaco y un elemento secundario 50% opaco, el resultado será que el elemento secundario será 25% opaco (0.5 & teims; 0.5). Si establece que el elemento secundario sea 100% opaco, el resultado final es que el elemento secundario aparecerá 50% opaco (0.5 × 1.0)

   No puede configurar algo para opacar "200%", por lo que nunca podrá tener un descendiente de un elemento semitransparente nunca más opaco que cualquier antecesor.

3. Por lo tanto, para arreglarlo, al pasar el mouse, configure toda la fila para que quede completamente opaca (y si lo desea, atenúe el <td> u otros elementos: http://jsfiddle.net/cMx49/5/

Answer 2

Los elementos secundarios solo tendrán una opacidad del 100% de la opacidad de sus elementos principales. En este caso su botón en 100% de opacidad 0.3. La única forma en que sé cómo hacer esto sin usar rgb (,,,) (que no funcionará en IE) es tener el TD colocado relativamente y configurar el botón para que se posicione absolutamente.

EDITAR:

Esto también se puede hacer manualmente con el uso de jQuery para atenuar cada elemento en lugar de desvanecer el elemento principal.

Prueba este violín http://jsfiddle.net/cMx49/18/

Answer 3

Yo recomendaría algo como esto. Rehice una buena parte del javascript.

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