: hover (마우스를 떠날 때)의 반대는 무엇입니까?

CSS :hover 만 사용 하는 것과 반대로 할 수있는 방법이 있습니까? 에서와 같이 : if :hoveris on Mouse Enter,에 상응하는 CSS가 on Mouse Leave있습니까?

예:

목록 항목을 사용하는 HTML 메뉴가 있습니다. 항목 중 하나를 가리키면에서 #999까지 의 CSS 색상 애니메이션이 있습니다 black. 어떻게 그 반대의 효과를 만들 수 있습니다 때부터 애니메이션과 함께 마우스 잎 항목 영역 black에 #999?

jsFiddle

(이 예제에만 대답하는 것이 아니라 전체 "반대 :hover"문제에 대해 대답하고 싶습니다 .)

올바르게 이해하면 전환을 마우스 오버 상태가 아닌 링크로 이동하여 동일한 작업을 수행 할 수 있습니다.

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

호버의 정의는 다음과 같습니다.

: hover 선택기는 요소 위에 마우스를 놓을 때 요소를 선택하는 데 사용됩니다.

그 정의에 따르면 hover의 반대는 마우스가 그 위에 있지 않은 지점 입니다. 나보다 훨씬 똑똑한 사람이이 기사를 작성하여 두 주에서 서로 다른 전환을 설정했습니다-http: //css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

그냥 사용하는 CSS 전환 대신에 애니메이션을.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

라이브 데모

CSS에서 마우스 휴가에 대한 명시적인 속성이 없습니다.

이 효과를 얻으려면 해당 항목을 제외한 다른 모든 요소에 : hover를 사용할 수 있습니다. 그러나 그것이 얼마나 실용적인지 잘 모르겠습니다.

JS / jQuery 솔루션을 봐야한다고 생각합니다.

CSS3 전환을 사용할 수 있습니다.

좋은 링크 :

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

여기에 대한 답변은 충분하지만 이 문제에 대한 W3Schools 예제는 매우 간단 하다고 생각 합니다 (혼란을 즉시 해결했습니다).

:hover선택기를 사용하여 마우스를 단추 위로 이동할 때 단추의 스타일을 변경하십시오.

팁 : 전환 기간 속성을 사용하여 "호버"효과의 속도를 결정하십시오.

예

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

요약하면, "입력"및 "종료"애니메이션을 동일하게하려는 전환의 .button경우 마우스 오버 선택기 대신 기본 선택기에서 전환을 사용해야 .button:hover합니다. "입력"및 "종료"애니메이션을 다르게하려는 전환의 경우 다른 기본 선택기 및 호버 선택기 전환을 지정해야합니다.

비 호버 선택에 기간 시간을 입력하십시오.

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

엉망인 요소에 전환을 추가하기 만하면됩니다. 페이지가로드 될 때 몇 가지 효과가있을 수 있습니다. 테두리 반경을 변경 한 것처럼 dom이로드 될 때 볼 수 있습니다.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

당신은 오해했습니다 :hover. 마우스가 항목에 방금 입력 한 것이 아니라 마우스가 항목 위에 있다고 말합니다.

:hover원하는 효과를 얻지 않고 선택기에 애니메이션을 추가 할 수 있습니다 .

전환이 더 나은 옵션입니다 : http://jsfiddle.net/Cvx96/

의 반대는 인 것 :hover같습니다 :link.

(편집 : 기술적으로 반대가 4 선택기이기 때문에 :link, :visited, :hover와 :active. 당신이 포함하면 다섯 :focus.)

예를 들어 .button:hover{ text-decoration:none }버튼의 밑줄을 제거 하는 규칙 을 정의 할 때 일부 브라우저에서 버튼을 굴릴 때 밑줄이 표시됩니다. 나는 이것을 수정했다.button:hover, .button:link{ text-decoration:none }

물론 이것은 실제로 링크 (href 속성이 있음) 인 요소에 대해서만 작동합니다.

inicial 클래스에 전환과 애니메이션 이름을 추가하기 만하면됩니다. 귀하의 경우에는 ul li a, "transition"속성 만 추가하면됩니다.

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>