css une Pourquoi l'opacité de mon bouton ne change-t-elle pas en stationnaire?




rendre une image transparente en html (3)

  1. Je pense que votre cas de test a été réduit au minimum, car je ne vois rien qui soit opaque à 100% pour commencer

  2. Il semble que vous ayez été troublé par l'opacité multiplicative. Si un élément parent est opaque à 50% et qu'un élément enfant est opaque à 50%, le résultat est que l'élément enfant sera opaque à 25% (0,5 et 0,5; Si vous définissez l'élément enfant comme étant 100% opaque, le résultat final est que l'élément enfant apparaîtra 50% opaque (0,5 × 1,0)

    Vous ne pouvez pas définir quelque chose sur "200%" opaque, et vous ne pouvez donc jamais avoir un descendant d'un élément semi-transparent jamais plus opaque qu'un ancêtre.

  3. Ainsi, pour le réparer, sur hover, placez toute la ligne pour arriver à l'opacité complète (et si vous le souhaitez, diminuez le <td> ou d'autres éléments: http://jsfiddle.net/cMx49/5/

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

Voir mon exemple JS Fiddle.

La fonctionnalité est censée "griser" toutes les lignes de la table (à l'exclusion de la ligne contenant le bouton cliqué) en cliquant sur un bouton donné. Cependant, en vol stationnaire, n'importe quel bouton devrait être complètement opaque.

Clairement, la classe correspond car le ">" devient rouge.

Alors pourquoi l'opacité planante ne passe-t-elle pas à 100%?



Les éléments enfants auront uniquement une opacité de 100% de l'opacité de leurs éléments parents. Dans ce cas, votre bouton dans 100% de 0,3 opacité. La seule façon que je sais comment faire ceci sans utiliser rgb (,,,) (qui ne fonctionnera pas dans IE) est d'avoir le TD positionné relativement et de positionner le bouton pour qu'il soit positionné absolument.

MODIFIER:

Cela peut également être fait manuellement avec l'utilisation de jQuery pour fondre chaque élément plutôt que de fondre le parent.

Essayez ce violon http://jsfiddle.net/cMx49/18/







opacity