轉換類懸停狀態，維持一段時間的舊狀態

我基本上有一個區域，可以通過點擊選擇或取消選擇。它有一個未選中狀態，懸停狀態與選定狀態相匹配，因此用戶可以獲得關於點擊的提示。轉換類懸停狀態，維持一段時間的舊狀態

同樣，當選擇時，hoverstate匹配未選擇的狀態。

下面是與選定的是「綠色」的一個例子：

.clicker { //standard state 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

.clicker:hover { 
    background-color: green; 
} 

.green { // selected state 
    background-color: green; 
} 

.green:hover { 
    background-color: red; 
}

的問題是，當用戶點擊，它立即從非選擇懸停選擇懸停轉彎，所以它看起來有點像他們未點擊它。

我希望有一段時間項目保持它的舊hoverstate，也就是說，它是未選定的（紅色），我懸停，它變成綠色，我點擊它，jQuery在後臺添加選定的/綠色狀態，但儘管如此，該區域保持綠色一秒鐘，而不是立即去選擇hoverstate（即顯示紅色）。

我想過使用一個簡單的（非）的動畫，是這樣的：

@keyframes holdGreen { 
    0% { 
     background-color: green; 
    } 
    99% { 
     background-color: green; 
    } 
    100% { 
     background-color: red; 
    } 
}

而且地方把

animation: holdGreen 
animation-duration: 1s

和類似holdRed時，我點擊選擇一個取消選擇。

如果它只是一個具有懸停狀態的類，但它在完全更改/添加也具有懸停狀態的類時不起作用。

任何想法？

來源

2013-02-18 Pou

這樣的事情可以工作？

jQuery(document).ready(function($) { 
    var selected = false; 
    $('.clicker').click(function(){ 
     selected = true; 
     $(this).addClass('selected'); 
    }); 
    $('.clicker').mouseout(function(){ 
     if(selected == true) { $(this).addClass('selectedHover') }; 
    }); 
});

那麼你將有一個看起來是這樣的一類：

.selectedHover:hover { background: red; }

基本上所有發生的事情是，控制在其「選中」狀態的項目懸停效果的類是唯一在用戶鼠標激活後離開物品時應用。

基本的例子：http://jsfiddle.net/KfHPJ/10/

希望這有助於。

來源

2013-02-18 23:17:32 Calvin

我認爲您需要使用JavaScript解決方法。看看這個實現你想法的小提琴http://jsfiddle.net/chrisdanek/SK3Vc/（僅僅爲了舉例，使用webkit前綴，因此請檢查Chrome）。您會注意到它在點擊時的行爲與預期相同，但是默認的懸停操作存在問題 - 應用背景顏色會有延遲。

.clicker { width: 100px; height: 100px; border: 2px solid; background-color: red; } 

.clicker:hover { background-color: green; -webkit-animation-name: holdRed; -webkit-animation-duration: 1s; } 

.green { background-color: green; animation: none; } 

.green:hover { background-color: red; -webkit-animation-name: holdGreen; -webkit-animation-duration: 1s; } 

@-webkit-keyframes holdGreen { 0% { background-color: green; } 
    99% { background-color: green; } 
    100% { background-color: red; } } 

@-webkit-keyframes holdRed { 0% { background-color: red; } 
    99% { background-color: red; } 
    100% { background-color: green; } }

來源

2013-02-18 23:39:26

轉換類懸停狀態，維持一段時間的舊狀態

回答

相關問題