無法獲得CSS漸變從淡入到：鏈接

Question

從過渡淡出和道歉，如果這已被解決之前。我瞭解了一些關於通過不透明轉換漸變漸變的方法，但是我很難將它們褪去。

我有一個div是一個鏈接，我的目標是在鼠標移過時使漸變漸變，然後當鼠標離開該區域時退色。

這裏是一個鏈接到的jsfiddle有關CSS：http://jsfiddle.net/94KEZ/

這是div本身（不透明度設置爲0）：

nav .nav-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 8%; 
    min-width: 110px; 
    height: 100%; 
    z-index: 8020; 
    cursor: pointer; 
    opacity: 0; 
    transition: opacity 2.75s; 
    -moz-transition: opacity 2.75s; 
    -webkit-transition: opacity 2.75s; 
    -o-transition: opacity 2.75s; 
} 

下面是懸停的CSS（似乎是工作確定...）

nav .nav-right:hover { 
    opacity: 1; 
    background: -moz-linear-gradient(left, rgba(255,242,0,0) 0%, rgba(255,252,0,0) 80%, rgba(255,255,0,0.8) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,242,0,0)), color-stop(80%,rgba(255,252,0,0)), color-stop(100%,rgba(255,255,0,0.8))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* IE10+ */ 
    background: linear-gradient(to right, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00fff200', endColorstr='#ccffff00',GradientType=1); /* IE6-9 */ 
    transition: opacity 5.75s; 
    -moz-transition: opacity 5.75s; 
    -webkit-transition: opacity 5.75s; 
    -o-transition: opacity 5.75s; 
} 

我也嘗試過這一點，但它似乎沒有工作：

nav .nav-right:link { 
    opacity: 0; 
    transition: opacity 2.75s; 
    -moz-transition: opacity 2.75s; 
    -webkit-transition: opacity 2.75s; 
    -o-transition: opacity 2.75s; 
} 

有什麼我在這裏失蹤？或者是不可能像這樣將漸變的不透明度轉換出來？

一如既往，感謝您提供任何幫助和建議。我也樂於提供更好的方法來達到這個目的。

Answer 1

是的，可以轉換不透明度。

但要這樣做，背景必須是恆定的;也就是說，它必須在基本狀態進行設置：

CSS

nav .nav-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 50%; 
    min-width: 110px; 
    height: 100%; 
    z-index: 8020; 
    cursor: pointer; 
    opacity: 0; 
    transition: opacity 2.75s; 
    -moz-transition: opacity 2.75s; 
    -webkit-transition: opacity 2.75s; 
    -o-transition: opacity 2.75s; 
    background: -moz-linear-gradient(left, rgba(255,242,0,0) 0%, rgba(255,252,0,0) 80%, rgba(255,255,0,0.8) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,242,0,0)), color-stop(80%,rgba(255,252,0,0)), color-stop(100%,rgba(255,255,0,0.8))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* IE10+ */ 
    background: linear-gradient(to right, rgba(255,242,0,0) 0%,rgba(255,252,0,0) 80%,rgba(255,255,0,0.8) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00fff200', endColorstr='#ccffff00',GradientType=1); /* IE6-9 */ 
} 

nav .nav-right:link { 
    opacity: 0; 
    transition: opacity 2.75s; 
    -moz-transition: opacity 2.75s; 
    -webkit-transition: opacity 2.75s; 
    -o-transition: opacity 2.75s; 
} 

nav .nav-right:hover { 
    opacity: 1; 
    transition: opacity 2.75s; 
    -moz-transition: opacity 2.75s; 
    -webkit-transition: opacity 2.75s; 
    -o-transition: opacity 2.75s; 
} 

updated demo