배경색 전환

배경색 전환

저는 변화의 효과를 만들기 위해 노력하고 있습니다.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 전환

ps.

아래의 @각 코멘트와 같이.

변환을 에 추가할 수도 있습니다.content #nav a사용자가 링크에서 마우스를 이동할 때 원본으로 페이딩됩니다.

전환 코드는 :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>

이를 달성하는 또 다른 방법은 다음과 같습니다.animation더 많은 제어 기능을 제공합니다.

/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
@keyframes onHoverAnimation {
    0% {
        background-color: #FF0;  
    }
    100% {
        background-color: #AD310B;
    }
}

#content #nav a {
    background-color: #FF0;
    
    /* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
    animation-duration: 1s; /* same as transition duration */
    animation-timing-function: linear; /* kind of same as transition timing */
    animation-delay: 0ms; /* same as transition delay */
    animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
    animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
    animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
    animation-play-state: running; /* can be set dynamically to pause mid animation*/
    
    
}

#content #nav a:hover {
    /* animation wont run unless the element is given the name of the animation. This is set on hover */
    animation-name: onHoverAnimation;
}

태그 스타일로 전환을 설정하고 호버로 배경을 변경할 수 있습니다.

a {
    background-color: #FF0;
    transition: background-color 300ms linear;
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
}

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

<a>Link</a>

언급URL : https://stackoverflow.com/questions/4411306/transition-of-background-color