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

问题是您的悬停效果是在移动的对象上。因此，一旦你移动了鼠标，它就会自动重置，因为浏览器会识别出鼠标不再在元素上。也许有时浏览器不需要你移动你的鼠标，这就是为什么它看似随机。

CSS3 Hover过渡奇怪的行为

2 个答案: