CODEWITHSUNDEEP
htmlcsshovertransition
Aleksandar Ivanov
Aleksandar Ivanov

Reputation: 317

CSS3 Hover transition strange behavior

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 ?

Upvotes: 1

Views: 451

Answers (2)

Ryan
Ryan

Reputation: 5682

@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.

Upvotes: 4

zeMinimalist
zeMinimalist

Reputation: 453

The problem is that your hover effect is on an object that moves. So once you move your mouse at all, it'll reset itself as the browser will recognize the mouse is no longer on the element. Perhaps sometimes the browser doesn't require you move your mouse, and this is why it may seem random.

Upvotes: 3

Related Questions