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

: 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/

---

You have misunderstood :hover; it says the mouse is over an item, rather than the mouse has just entered the item.

You could add animation to the selector without :hover to achieve the effect you want.

Transitions is a better option: http://jsfiddle.net/Cvx96/

---

The opposite of :hover appears to be :link.

(edit: not technically an opposite because there are 4 selectors :link, :visited, :hover and :active. Five if you include :focus.)

For example when defining a rule .button:hover{ text-decoration:none } to remove the underline on a button, the underline shows up when you roll off the button in some browsers. I've fixed this with .button:hover, .button:link{ text-decoration:none }

This of course only works for elements that are actually links (have href attribute)

---

Although answers here are sufficient, I really think W3Schools example on this issue is very straightforward (it cleared up the confusion (for me) right away).

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect:

Example

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

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

In summary, for transitions where you want the "enter" and "exit" animations to be the same, you need to employ transitions on the main selector .button rather than the hover selector .button:hover. For transitions where you want the "enter" and "exit" animations to be different, you will need specify different main selector and hover selector transitions.

---

Put your duration time in the non-hover selection:

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

li a:hover {
  padding:19px;
}

참고URL : https://stackoverflow.com/questions/10995165/what-is-the-opposite-of-hover-on-mouse-leave