CSS3懸停轉換奇怪的行爲

Question

所以我正在玩轉換/懸停效果，所以這就是代碼。

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> 

LESS

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; 
      } 
     } 
    } 
} 

例如：http://jsbin.com/anitob/1

，但我偶然發現了一個奇怪的東西。當我將鼠標懸停在一個鏈接上時，它將開始移動到懸停時使用的正確位置，但是在某個時刻（總是不同），效果會停止並恢復到原來的位置！

有沒有人看過這個，知道是什麼問題？

Answer 1

@zeMinimalist是對的。

作弊方式（如果你想保持懸停效果）是移動圖像而不是元素。

所以基本上你的形象將是一個虛擬元素放置在與懸停效果元素的頂部。然後，當它們懸停在「圖像」上時，它會按預期方式移動，並且不會重置，因爲具有懸停觸發器的元素尚未移動。

所以是這樣的：

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

那麼用戶將鼠標懸停在.static_element但.moving_element是過渡的一個。

Answer 2

問題是您的懸停效果在移動的對象上。因此，一旦您移動鼠標，它將自動重置，因爲瀏覽器會識別鼠標不再位於該元素上。也許有時瀏覽器不需要移動鼠標，這就是爲什麼它可能看起來是隨機的。