不需要過渡上：積極的CSS

我剛開始學習HTML & CSS和我不完全知道我在做什麼，但..不需要過渡上：積極的CSS

我已經添加了：懸停過渡，這樣，當我將鼠標懸停在我的標題「FIENDS」中，它從＃000000到＃800000淡出。我已經實施和哪些工作。我還添加了css：active，這樣當我點擊我的標題「FIENDS」時，它立即從＃800000切換到#ffffff。但目前它不是即時切換，它似乎在使用我設置的過渡：懸停和淡入到#ffffff。有沒有人有解決這個問題？

謝謝。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Fiends</title> 
     <link href="style.css" type="text/css" rel="stylesheet" /> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
     <meta name="description" content="Fiends" /> 
</head> 
<body> 
    <div> 
     <h1 class="centertext"><fade>FIENDS</fade></h1> 
    </div> 
</body> 
<html>

CSS

html { 
    background-color: #ffffff} 

body { 
    font-family: bebas neue; 
    text-align: center;} 

h1 { 
    color: #000000; 
    font-weight: normal; 
    font-size: 200px; 
    letter-spacing: 15px;} 

h1.centertext { 
    margin: 225px auto auto auto} 

fade { 
    color: #000000; 
    -webkit-transition: color .12s linear; 
    -moz-transition: color .12s linear; 
    -ms-transition: color .12s linear; 
    -o-transition: color .12s linear; 
    transition: color .12s linear;} 

fade:hover { 
    color: #800000;} 

fade:active { 
    color: #ffffff}

來源

2013-10-09 Fiend Two

你可能將不得不使用JavaScript來獲取你想要的全動畫效果。您可以在:active改變transition屬性，例如：

fade:active { 
    transition: none; 
    color: #fff; 
}

http://jsfiddle.net/Rppmd/

然而，當它不再有效，因此該元素仍然會掉色回到transition不被覆蓋（即解不完善）。

使用JavaScript，您可以完全刪除transition並讓JS完成所有動畫。這將允許您設置動畫時間，例如懸停。在mousedown和mouseup上，不需要動畫，只需改變顏色。

來源

2013-10-09 15:06:48

感謝您的回答！原諒我的無知，但JavaScript和HTML＆CSS有什麼關係？我怎樣才能使用你建議的行動來實現我的目標？ –

@FiendTwo你有很多閱讀：https：//developer.mozilla.org/en-US/docs/Web/JavaScript –

不需要過渡上：積極的CSS

回答

相關問題