[css] 배경색 전환

Program / 글쓴이

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항목의 목록입니다.

답변

내가 아는 한 현재 전환은 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 명 전환

답변

나에게 : 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>

스 니펫 확장

답변