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！ ;）

CSS Opacity与其他CSS3过渡混乱

1 个答案: