CSS3 호버 천이 이상 동작

그래서 전이/호버 효과를 사용하여 코드를 연주했습니다.CSS3 호버 천이 이상 동작

HTML은

<section> 
    <a href="#" title="button">CLICK!</a> 
    <a href="#" title="button">CLICK!</a> 
    <a href="#" title="button">CLICK!</a> 
    <a href="#" title="button">CLICK!</a> 
    </section>

section { 
    width: 700px; 
    height: 500px; 
    margin: 250px auto; 
    position: relative; 
    background: #08c; 

    a { 
     border-radius: 51px; 
     background: #e60; 
     line-height: 100px; 
     text-align: center; 
     color: #04e; 
     font-size: 24px; 
     font-weight: bold; 
     font-family: tahoma; 
     text-decoration: none; 
     display: block; 
     width: 100px; 
     height: 100px; 

     &:nth-child(1){ 
      position: absolute; 
      top: -100px; 
      left: -100px; 
      -webkit-transition: left 2s ease; 

      &:hover, 
      &:focus{ 
      left: 800px; 
      } 
     } 
     &:nth-child(2){ 
      position: absolute; 
      top: -100px; 
      right: -100px; 
      -webkit-transition: top 2s ease; 

      &:hover{ 
      top: 600px; 
      } 
     } 
     &:nth-child(3){ 
      position: absolute; 
      bottom: -100px; 
      right: -100px; 
      -webkit-transition: right 2s ease; 

      &:hover{ 
      right: 600px; 
      } 
     } 
     &:nth-child(4){ 
      position: absolute; 
      bottom: -100px; 
      left: -100px; 
      -webkit-transition: bottom 2s ease; 

      &:hover{ 
      bottom: 600px; 
      } 
     } 
    } 
}

예 LESS : http://jsbin.com/anitob/1

을하지만, 나는 이상한 일이 우연히 발견. 내가 링크 위로 마우스를 가져 가면 호버에 의해 적용된 올바른 위치로 이동하기 시작하지만 어떤 점에서는 (항상 다른 경우) 효과가 멈추고 원래 위치로 돌아갑니다!

누구든지이 문제를 알고 문제가 있음을 알고 있습니까?

출처

2012-12-04 Aleksandar Ivanov

편의를 위해 코드를 다시 게시 할 수 있습니까 (가급적이면 jsfiddle로)? 태그에 문자가 없기 때문에 복사 붙여 넣기에 일부 불량배가있는 것 같습니다. –

그런데 좋은 효과가 있습니다.) http://jsbin.com/anitob/1 – dmi3y

@zeMinimalist가 맞습니다.

이 문제를 피하는 방법 (호버 효과를 유지하려는 경우)은 이미지를 이동하지만 요소는 이동하지 않는 것이 좋습니다.

기본적으로 이미지는 호버 효과가 적용된 더미 요소입니다. 그런 다음 '이미지'위로 마우스를 가져 가면 예상대로 움직이며 호버 트리거가있는 요소가 이동하지 않아 재설정되지 않습니다.

그래서 이런 식으로 뭔가 :

.moving_element{ 
    left: 0px; 
    -webkit-transition: bottom 2s ease; 
} 
.static_element:hover .moving_element{ 
    left: 800px; 
}

그래서 사용자는 .static_element 가리킬하지만 .moving_element는 전환 하나입니다.

출처

2012-12-04 23:02:29 Ryan

다른 것을 추가해 주셔서 감사합니다. 나는 아마 그렇게 했어야한다고 생각했다. – zeMinimalist

위대한 아이디어 남자, 감사합니다 :) –

문제는 이동하는 객체에 호버 효과가 있다는 것입니다. 따라서 마우스를 움직이면 브라우저가 마우스를 더 이상 요소로 인식하지 못하기 때문에 자체 재설정됩니다. 때때로 브라우저에서 마우스를 움직일 필요가 없기 때문에 이것이 무작위로 보일 수 있습니다.

출처

2012-12-04 22:50:11 zeMinimalist

나는 의심하고 있었지만 지역 문제의 가능성을 배제하고 싶었습니다. 고마워요 :) –

CSS3 호버 천이 이상 동작

답변

관련 문제