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

Firebug 抛出的错误:

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

看起来你在调用函数时没有等待 jQuery 被激活。

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

然后安装 Firebug! ;)