1

所以我在玩转场/悬停效果，这就是代码。

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

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

但是，我偶然发现了一件奇怪的事情。当我将鼠标悬停在链接上时，它开始到达悬停应用的正确位置，但在某些时候（总是不同）效果停止并返回到原始位置！

有没有人看到这个并知道是什么问题？

4

2 回答 2

4

@zeMinimalist 是对的。

绕过这个的方法（如果你想保持悬停效果）是移动图像而不是元素。

因此，基本上您的图像将是放置在具有悬停效果的元素顶部的虚拟元素。然后，当他们将鼠标悬停在“图像”上时，它会按预期移动并且不会重置，因为带有悬停触发器的元素没有移动。

所以是这样的：

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

因此，用户将鼠标悬停在 上，.static_element但.moving_element是转换的那个。

于 2012-12-04T23:02:29.217 回答
3

问题是您的悬停效果是在移动的对象上。因此，一旦您完全移动鼠标，它就会自行重置，因为浏览器会识别出鼠标不再位于元素上。也许有时浏览器不需要您移动鼠标，这就是它看起来随机的原因。

于 2012-12-04T22:50:11.930 回答