메뉴 호버에서 배경색을 부드럽게 전환하는 방법은 무엇입니까?

메뉴를 가리키면 부드러운 배경색 전환을 구현하는 방법

마우스를 올리면 배경색에 대한 전환 효과를 얻는 것이 일반적인 스타일 요구 사항입니다. 하지만 때로는 어려움을 겪을 수도 있습니다. 여기서는 이 문제에 대한 해결책을 탐색합니다.

원본 코드

제공된 CSS 코드는 배경색 전환을 구현하려고 시도하지만 문제가 발생합니다.

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Transition properties */
}

솔루션

활성화하려면 전환하려면 다양한 브라우저에서 지원을 보장해야 합니다. 다음 업데이트된 코드는 원하는 페이딩 효과를 제공해야 합니다.

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

설명

• -webkit-transition 및 -ms-transition은 브라우저별 지원을 제공합니다. Safari 및 Internet Explorer의 전환에 각각 사용됩니다.
• transition은 최신을 지원하는 표준 전환 속성입니다. 브라우저.

예

<a>Navigation Link</a>

위 내용은 메뉴 호버에서 배경색을 부드럽게 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!