:hover(마우스 탈퇴 시)와 반대되는 것은 무엇입니까?

:hover(마우스 탈퇴 시)와 반대되는 것은 무엇입니까?

를 로 할 수 ?:hover CSS만 사용?에 있는 경우: if:hover이다.on Mouse Enter CSS 에 ?on Mouse Leave?

예:

리스트 항목을 이용한 HTML 메뉴가 있습니다. 중 면 CSS.#999.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 selector는 요소 위에 마우스를 올려놓을 때 요소를 선택하는 데 사용됩니다.

이 정의에 따르면 마우스가 마우스 위에 있지 않은 지점은 호버의 반대입니다.저보다 훨씬 똑똑한 사람이 이 기사를 작성해 두 주에 다른 전환을 설정했습니다 - 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;
}

반대는 입니다를 입니다.:not

예.

selection:not(:hover) { rules }

애니메이션 대신 CSS 전환만 사용하면 됩니다.

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

A:hover {
    color: #000;
}

라이브 데모

시간을 비호버 선택 항목에 넣습니다.

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

li a:hover {
  padding:19px;
}

당신이 문제 삼고 있는 요소에 전환만 추가하면 됩니다.페이지가 로드될 때 일부 효과가 있을 수 있음을 유의하십시오.테두리 반경을 변경한 경우와 마찬가지로 돔이 로드되면 표시됩니다.

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

아니요. CSS에는 마우스 탈퇴에 대한 명시적인 속성이 없습니다.

이 효과를 얻기 위해서는 문제의 항목을 제외한 다른 모든 요소에 :hover를 사용할 수 있습니다.하지만 그게 얼마나 실용적일지 잘 모르겠습니다.

JS/jQuery 솔루션을 살펴보셔야 할 것 같습니다.

클래식에 전환과 애니메이션의 이름을 추가하면 됩니다. 울리아의 경우 "전환" 속성을 추가하면 됩니다.

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>

으로 를 사용합니다.transition는 단지 다음과 같이 밀리초를 지정하고 있습니다.transition: 500ms;

다음 토막글을 시도해 보십시오.

div{
  background: DeepSkyBlue;
  width:150px;
  height:100px;
  transition: 500ms;
}
div:hover{
  opacity: 0.5;
  cursor:pointer;
}

<div>HOVER ME</div>

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. "Enter" 애니메이션과 "Exit" 애니메이션을 다르게 만들려는 전환의 경우 다른 주 선택기와 호버 선택기 전환을 지정해야 합니다.

배경색이 추가됩니다..icon마우스 포인터가 요소를 떠날 때 맴돌고 배경이 희미해집니다.

.icon {
   transition: background-color 0.5s ease-in-out; /* this is important */
}
.icon:hover {
   background-color: rgba(169, 169, 169, 0.9);
}

당신이 오해했습니다.:hover; 마우스가 방금 항목에 들어간 것이 아니라 항목 위에 마우스가 있다고 표시됩니다.

선택기에 애니메이션을 추가할 수 있습니다.:hover당신이 원하는 효과를 얻기 위해서 입니다.

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

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

(편집: 셀렉터가 4개이므로 엄밀히 반대는 아닙니다.:link,:visited,:hover그리고.:active. 포함하면 5개:focus.)

예를 들어 규칙을 정의할 때.button:hover{ text-decoration:none }단추의 밑줄을 제거하기 위해 일부 브라우저에서 단추를 롤오프하면 밑줄이 나타납니다.저는 이것을 고쳤습니다..button:hover, .button:link{ text-decoration:none }

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

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