배경색 전환

286

background-color메뉴 항목을 가리킬 때 전환 효과를 만들려고하는데 작동하지 않습니다. 내 CSS 코드는 다음과 같습니다.

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

는 #nav div메뉴입니다 ul항목의 목록입니다.

css

— 진 가이
소스

참고로 Firefox에서 작동합니다. FF9에서 테스트되었습니다.

— C.Brown

답변:

527

내가 아는 한 현재 전환은 Safari, Chrome, Firefox, Opera 및 Internet Explorer 10 이상에서 작동합니다.

이렇게하면 다음 브라우저에서 페이드 효과가 나타납니다.

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

<a>Navigation Link</a>

스 니펫 확장

참고 : 당신이에 전환을 넣으면 바와 같이, 코멘트에 제럴드 지적 a대신에의, a:hover원래 색으로 돌아 사라질 때 마우스 이동 거리의 링크.

이도 유용하게 사용할 수있는 CSS 기초 : CSS 3 명 전환

— 장골
소스

또한 content #nav a사용자가 마우스를 링크에서 떨어 뜨릴 때 원본으로 다시 페이드 되도록 전환을 넣을 수 있습니다 .

— gak

바이올린 호버 와 클릭 의 전환 : jsfiddle.net/K5Qyx

— 민주 Pilafian

transition:호버가 아닌 곳에 넣는 것이 낫지 않습니까? 사용자가 호버링 할 때마다 전환이 컴파일된다고 생각합니다.

— Matej

@Illium Link는 죽었다

— ferdynator

CSS transition는 여기에서 테스트 할 수있는 것처럼 "선형 그라디언트"종류의 색상을 처리 할 수없는 것 같습니다 . 그리고 btw, @Ilium의 답변은 솔루션으로 표시되어야합니다.

— Stacky

나에게 : hover 또는 다른 추가 선택기보다 원래 / 최소 선택기로 전환 코드를 넣는 것이 좋습니다.

#content #nav a {
    background-color: #FF0;
    
    -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;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>

스 니펫 확장

— 레자 마문
소스

더 나쁘다는 것이 아닙니다. lement 자체에서 전환을 지정하면 요소가 호버링되고 "호버링되지 않은"상태가 될 때 애니메이션이 표시됩니다. 마우스를 : hover에 적용하면 마우스가 들어갈 때 애니메이션이 나오지만 떠날 때는 애니메이션이 표시되지 않습니다.

— LucasBeef

이 솔루션은 전반적으로 더 좋습니다. 전환 효과는 호버에서 페이드 인되고 흐려지면 페이드 아웃됩니다.

— Chizzle