CSS-переход не работает

Привет всем. В настоящее время я пытаюсь выполнить переход, когда вы наводите курсор на фон, который становится фиолетовым, а цвет текста становится белым.

Но это не работает!

Что я делаю не так!?

a:hover {
    color: white;
    -webkit-transition: color 1000ms linear;
    -moz-transition: color 1000ms linear;
    -o-transition: color 1000ms linear;
    -ms-transition: color 1000ms linear;
    transition: color 1000ms linear;
    background-color: purple;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Так что ///РЕДАКТИРОВАТЬ, так как все продолжают говорить мне добавить его вместо: hover ...

Исходное состояние:

text-color:black;
background:none;

Состояние нахождения:

Плавный переход на:

 text-color:white;
background:black;

Я надеюсь, что это поможет всем Спасибо за ваше время!

8 голосов | спросил user2766367 14 +04002013-10-14T19:59:45+04:00312013bEurope/MoscowMon, 14 Oct 2013 19:59:45 +0400 2013, 19:59:45

3 ответа


0

Поместите их в a (не при наведении) И если вы хотите несколько переходов, вы должны объявить их вместе.

-webkit-transition: color 1000ms linear, background-color 1000ms linear;

http://jsfiddle.net/4zhnP/1/

ответил Moob 14 +04002013-10-14T20:39:04+04:00312013bEurope/MoscowMon, 14 Oct 2013 20:39:04 +0400 2013, 20:39:04
0

Не устанавливайте переход для свойства: hover.

a {
color: white;
-webkit-transition: color 1000ms linear;
-moz-transition: color 1000ms linear;
-o-transition: color 1000ms linear;
-ms-transition: color 1000ms linear;
transition: color 1000ms linear;
background-color: purple;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}

Затем задайте, что на самом деле меняется в свойстве :hover. Например,

a:hover{
color:green;
}
ответил Dan Johnson 14 +04002013-10-14T20:03:12+04:00312013bEurope/MoscowMon, 14 Oct 2013 20:03:12 +0400 2013, 20:03:12
0

Вы должны попытаться установить переходы для a вместо a:hover

Дополнительную информацию о переходах можно найти здесь: https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

ответил vanev_ 14 +04002013-10-14T20:03:27+04:00312013bEurope/MoscowMon, 14 Oct 2013 20:03:27 +0400 2013, 20:03:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132