Нежелательный переход на: активный CSS

Я только начал изучать HTML & CSS, и я не совсем уверен, что я делаю, но ..Нежелательный переход на: активный CSS

Я добавил: парения переход так, что когда я зависать над моим заголовком «FIENDS» он исчезает с # 000000 до # 800000. Который я реализовал и который работает. Я также добавил css: active, так что, когда я нажимаю на заголовок «FIENDS», он мгновенно переключается с # 800000 на #ffffff. Но на данный момент он не мгновенно переключается, кажется, что я использую переход, который я настроил для: hover и fading на #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. Вы можете изменить transition свойство в :active, например:

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

ответ

Смежные вопросы