CSS 不透明度与其他 CSS3 过渡混淆

Question

所以我有几个悬停链接，我正在对它们使用 css3 过渡效果。由于某种原因，在我将鼠标悬停在对其元素应用不透明度的链接上之后，其他具有过渡效果的链接停止工作。观看视频，以便您了解我的意思：http://vimeo.com/14869503 - 密码是视频的 stackoverflow。我不希望设计完全公开。

关于什么可能导致此问题的任何想法或者它是一个错误？有什么办法解决吗？

谢谢！

---

所以这里是有问题的开发网站：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 的效果，让它跨浏览器工作。到目前为止 the state of 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 非常重要）。

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

萤火虫抛出的错误：

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

它接缝你在调用函数而不等待 jQuery 被激活。

解决这个问题，我们会看看 CSS 是否有问题，或者只是 JS。

然后安装 Firebug！ ;)