9

皆さん、こんにちは。ホバーすると背景が紫になり、テキストの色が白に変わるトランジションを現在試みています。(元は背景色がなく、テキストの色は黒です...)

しかし、それは機能していません！

私が間違っているのは何ですか!?

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;
}

だから///誰もがa:hoverではなくaに追加するように言っているので編集...

初期状態：

text-color:black;
background:none;

ホバー状態:

スムーズな移行:

 text-color:white;
background:black;

これが皆さんのお役に立てば幸いです。お時間をいただきありがとうございます。

4

3 に答える 3

8

それらを a (ホバーではなく) に配置し、複数のトランジションが必要な場合は、それらをまとめて宣言する必要があります。

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

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

于 2013-10-14T16:39:04.660 に答える
5

: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;
}
于 2013-10-14T16:03:12.907 に答える
1

aではなく、 でトランジションを設定するようにしてa:hoverください。

トランジションの詳細については、https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions をご覧ください。

于 2013-10-14T16:03:27.837 に答える