2010-09-10 57 views
0

所以我有幾個懸停鏈接,我對他們使用css3轉換效果。出於某種原因,我將鼠標懸停在不透明度適用於其元素的鏈接上後,其他具有過渡效果的鏈接停止工作。看到視頻,你可以看到我的意思:http://vimeo.com/14869503 - 密碼是視頻的stackoverflow。我不希望設計完全公開。與其他CSS3轉換混淆CSS不透明

任何想法可能會導致這個或它是一個錯誤?任何解決它的方法?

謝謝!


所以這裏是有問題的開發站點: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關於這兩個要素。很抱歉讓代碼這麼晚了。多謝你們!

+0

視頻是一個有趣的用戶界面演示,但是,正如@Frankie所建議的那樣,爲了提供*特定*幫助,我們可能需要查看一些代碼。 – 2010-09-10 23:05:14

+0

我們很難在沒有看到代碼的情況下進行調試。我會建議嘗試削減您的網頁,只是一個最小的例子,說明問題。消除除有問題的鏈接以外的所有內容,所有不相關的樣式等等,然後發佈您遇到的問題的演示。在這個過程中,這實際上可以幫助你發現你的問題;如果沒有,您可以編輯您的問題以包含該簡化示例,我們將能夠爲您提供更好的幫助。 – 2010-09-10 23:06:55

+0

我添加了代碼和問題鏈接。 – Marc 2010-09-15 13:26:36

回答

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

+0

愚蠢的我不給任何代碼。只是認爲視頻會是一個很好的視覺效果。我會在市外呆幾天。我將在週二發佈代碼。非常感謝! – Marc 2010-09-11 20:29:43

+0

@Marc享受旅程! ;) – Frankie 2010-09-11 20:56:47

+0

我添加了代碼和問題的網站鏈接。 – Marc 2010-09-15 13:26:02