Question

So I was playing around with transition/hover effects so that’s the code.

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

example: http://jsbin.com/anitob/1

BUT, I stumbled upon a strange thing. When I hover over a link its starts getting to its right position applied by the hover, but at some point (always different) the effect stops and it gets back to its original position!

Have anyone seen this and know what is the problem ?

Answer 1

@zeMinimalist is right.

The way to cheat around this (if you want to stay with the hover effect) is to move the image but not the element.

So basicly your image would be a dummy element laid on top of the element with the hover effect. Then when they hover over the ‘image’ it moves as expected and doesn’t reset because the element with the hover trigger hasn’t moved.

so something like this:

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

So the user hovers over the .static_element but the .moving_element is the one that transitions.