如何通過懸停轉換使元素變暗？

Question

我有這樣的代碼：

<div class="link" id="link1"> 
    <h1>Lorem Ipsum</h1> 
</div> 
<div class="link" id="link2"> 
    <h1>Lorem Ipsum</h1> 
</div> 

---

.link{ 
    display: inline-block; 
    width: 100%; 
    height: 50%; 
    float: left; 
    transition:0.25s; 
} 
.link:hover { 
    background: linear-gradient(
     rgba(0, 0, 0, 0.25), 
     rgba(0, 0, 0, 0.25)); 
    transition:0.25s; 
} 

這使得暗。鏈路，當你將鼠標懸停在它，但我很樂意聽到的話有可能過渡到它。

編輯：我應該首先明確這一點。我有多個鏈接，當你將鼠標懸停在它上面時，我希望所有這些鏈接都轉換爲較暗的顏色。我已經更新了之前的小提琴。

的jsfiddle：http://jsfiddle.net/rpo12dhx/5/

Answer 1

如果你只是想過渡到更暗的顏色上:hover，你不需要linear-gradient。你可以簡單地過渡到更深的顏色。

此外，您沒有指定transition-property（即background）。

.link { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 50%; 
 
    background: #394053; 
 
    transition: background 0.8s; 
 
} 
 
.link:hover { 
 
    background: #172032; 
 
}

<div class="link" id="link1"> 
 
    <h1>Lorem Ipsum</h1> 
 
</div>

Answer 2

這裏是你的小提琴更新

JS FIDDLE

拿出id選擇，並添加了背景色主選擇，也不要以爲你可以使用：不psuedo on：hover pseudo做成紅色以突出顯示效果

.link{ 
 
\t display: inline-block; 
 
\t width: 100%; 
 
\t height: 50%; 
 
\t float: left; 
 
\t transition:background-color 1s; 
 
    -webkit-transition:background-color 1s; 
 
    \t background-color: #394053; 
 
} 
 

 
.link:hover { 
 
\t background-color:red; 
 
\t 
 
}

<div class="link" id="link1"> 
 
\t <h1>Lorem Ipsum</h1> 
 
</div>

Answer 3

試試這個：

DEMO

.link { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 50%; 
 
    float: left; 
 
    transition: 0.25s; 
 
    background: red; 
 
} 
 
.link:hover { 
 
    background: darkred; 
 
}

<div class="link" id="link1"> 
 
    <h1>Lorem Ipsum</h1> 
 
</div>

注意，顏色可以是您選擇的任何一個。 （可以加速/減速通過改變transition值） - 這裏有一點需要包括vendor prefixes這個

NB

我看到目前所有的答案已經刪除你的CSS的:not(hover)部分。這是因爲特異性。把它看作「更具體」，「更重要」。

如此，.link將超過由.link:hover寫徘徊的時候，因爲它是比平原「鏈接」更具體的，因此我們並不需要包括這一點。