Fadein上懸停，然後淡出原始狀態，但保持懸停狀態onklicked

Question

我要創建的是淡入/淡出圖像顯示其背後的圖像，其上有文字，用戶可以留在點擊該按鈕。然後當點擊另一個按鈕時，它將回到其原始狀態。但是，當一個圖像被點擊時，其他按鈕可以被懸停。

有8個圖像/按鈕。

Answer 1

添加以下類到你的CSS樣式表：

1. 非活動按鈕的狀態CSS類：

   .buttonInactive { /* your inactive styles here */ }

2. CSS類，它利用了:hover假的類，將自動處理懸停爲你沒有JavaScript：

   .buttonInactive:hover { /* your hover styles here */ }

3. 一個CSS類，是當前選擇的（即最近點擊按鈕），這將通過JavaScript設置：

   .buttonActive { /* your active styles here */ }

在HTML每個按鈕應該被設置爲class="buttonInactive"。如果你在這一點上測試它，你應該看到懸停的工作。

然後，在JavaScript中，添加一個處理點擊按鈕：

$(document).ready(function() { 
    $(".buttonInactive").click(function() { 
     // your code here 
    }); 
}); 

您已經標記了使用jQuery你的問題，這使得添加和刪除樣式很簡單。您點擊處理程序中的JavaScript將需要從以前可能已經處於活動狀態的任何其他元素（可以在一行jQuery中完成）中刪除buttonActive類，然後將buttonActive類添加到單擊的元素中（只需要多行jQuery的）。或者，您可能希望從當前活動的元素中刪除buttonInactive（顯然，當它變爲非活動狀態時將其放回）。

你需要的jQuery是非常基本的，所以我會留給你做一些谷歌搜索，並找出你自己。