Почему непрозрачность моей кнопки не меняется при наведении курсора? - PullRequest
Новая
       62

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

3 голосов
/ 27 марта 2012 
<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 Fiddle .

Предполагается, что эта функция "затеняет" все строки в таблице (исключая строку, содержащуюнажал кнопку) после нажатия любой кнопки.Однако при наведении курсора любая кнопка должна быть полностью непрозрачной.

Очевидно, что класс совпадает, потому что ">" становится красным.

Так почему прозрачность при наведении не изменяется на 100%?

Ответы [ 3 ]

4 голосов
/ 27 марта 2012

2019 rgba Обновление

У вас не должно возникнуть проблем с использованием синтаксиса rgba через 7 лет после ответа на этот вопрос. Он поддерживается во всех основных браузерах и поддерживается некоторое время.

Совместимость

Оригинальный ответ

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

EDIT:

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

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

3 голосов
/ 27 марта 2012

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

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

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

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

0 голосов
/ 27 марта 2012

Я бы порекомендовал что-то подобное.Я переработал большую часть JavaScript.

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

...