Непрозрачность CSS, связанная с другими переходами CSS3

Question

Итак, у меня есть несколько ссылок при наведении курсора, и я использую на них эффект перехода css3.По какой-то причине после того, как я наведу указатель мыши на ссылку, к которой применяется непрозрачность, другие ссылки с эффектом перехода перестают работать.Посмотрите видео, чтобы вы поняли, что я имею в виду: http://vimeo.com/14869503 - пароль является стековым потоком для видео.Я не хочу, чтобы дизайн был полностью публичным.

Есть идеи, что может вызвать это, или это ошибка?Есть ли способы ее решения?

Спасибо!

---

Итак, вот сайт разработчика, у которого есть проблема: http://dev.thriveafrica.org/

CSS, который я применил к навигации:

#nav-container #nav ul a {
    padding: 10px 10px 5px;
    background: url('images/nav/boy.png') no-repeat 0px 45px;
    text-decoration: none;
    color: #FFF;
    font-family: Bebas, Arial, Helvetica;
    font-size: 15px;
}
#nav-container #nav ul a:hover {
    background: url('images/nav/boy.png') no-repeat 0px 11px;
    color: #F15A29;
}

И CSS, который я применил к элементам с непрозрачностью на правой стороне:

    #home-right #store_items ul li {
    text-align: left;
    height: 70px;
    background: #FFF;
    margin: 10px 0;
    padding: 5px 0;
    border: 1px solid #EEE;

    opacity: 0.7;
    -moz-opacity: 0.7;
    filter:alpha(opacity=70);

    -moz-box-shadow: 1px 1px 2px #CCCCCC; /* FF3.5+ */
    -webkit-box-shadow: 1px 1px 2px #CCCCCC; /* Saf3.0+, Chrome */
    box-shadow: 1px 1px 2px #CCCCCC; /* Opera 10.5, IE 9.0 */

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;

    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

#home-right #store_items ul li:hover {
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter:alpha(opacity=100);

    border: 1px solid #CCC;
}

    #home-right #store_items ul li a {
        color: #c24b00;
        display: block;
    }

Кроме этого нет никакого другого CSS относительно этих двух элементов.Извините, что получил код так поздно.Спасибо, ребята!

Answer 1

Возможно, у вас ошибка в вашем коде Javascript.

Когда вы запускаете кнопки прозрачности, ошибка падает, а остальные переходы останавливаются. Может быть, мы сможем продолжить отладку, если вы можете опубликовать код.

---

Редактировать: Обратите внимание, что вы используете эффект перехода CSS3, который не будет работать в большинстве браузеров. Вы, вероятно, должны вернуться к эффектам jQuery, чтобы он работал кросс-браузерно. Пока что состояние transition должно быть примерно таким:

Apple Safari (supported in Safari 3.1 and later, and in iPhone OS 2.0 and later.)
Google Chrome
Mozilla Firefox 3.7 alpha (also known as Minefield)
Opera 10.5x (also supported by Opera Mobile 10 beta 2)

---

Редактировать: Я сейчас запустил ваш сайт и вижу, используя Firefox и Firebug , что следующая функция выдает ошибку (обычно ошибки довольно важны для IE). 1023 *

// on store_feed.js
jQuery.fn.random = function (amount) {
    var els = this.get();
    var ret = [];

    while (els.length && ret.length < amount) {
        ret.push(els.splice(Math.floor(Math.random() * els.length), 1)[0]);
    }

    return $(ret);
}

Ошибка выдает Firebug:

$ is not a function
store_feed.js : return $(ret);

Появляется, что вы вызываете функцию, не дожидаясь активации jQuery.

Исправьте это, и мы увидим, если что-то не так с CSS или это просто JS.

И установите Firebug! ;)