내 메뉴 배경 색상에 부드러운 마우스 오버 전환을 어떻게 추가할 수 있나요?

전환을 사용하여 메뉴 호버 효과에 부드러운 전환 추가

호버에서 메뉴 항목의 배경색을 전환하는 데 문제가 있습니다. CSS 코드에 표시된 대로. 이 문제는 전환에 대한 브라우저 지원 부족으로 인해 발생합니다.

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

이 수정된 코드에서는:

• 배경색만 대상으로 전환 속성을 단순화하여 가능성을 줄였습니다. 다른 속성과의 충돌이 발생합니다.
• ease-in을 선형으로 대체하여 브라우저 전반에 걸쳐 보다 일관된 전환 효과를 제공합니다.

이 업데이트된 코드를 사용하여 이제 관찰해야 할 사항 지원되는 브라우저에서 메뉴 링크 위로 마우스를 가져갈 때 부드러운 페이딩 효과.

위 내용은 내 메뉴 배경 색상에 부드러운 마우스 오버 전환을 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!