javascript - CSS - On hover moving image littlebit left, if not hovered then back to original position - Stack Overflow

admin管理员组

文章数量:1220536

I've been trying doing it, but it doesn't work. It should move that image left 10px, but it doesn't. That div has left css inside it, I think it's because of that. I tried !important, but it didn't work.

Here's JSFiddle: /

$(".seen").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})

$(".seen").hover(function(){
  $(this).addClass("animated");        
})

---

@-webkit-keyframes example {
  0% {
    left: 0px;
  }
  25% {
    left: 10px ! important;
  }
  100% {
    left: 0px;
  }
}

.seen.animated {
  position: relative;
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
}

I've been trying doing it, but it doesn't work. It should move that image left 10px, but it doesn't. That div has left css inside it, I think it's because of that. I tried !important, but it didn't work.

Here's JSFiddle: https://jsfiddle.net/jwbvxhv0/1/

$(".seen").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})

$(".seen").hover(function(){
  $(this).addClass("animated");        
})

---

@-webkit-keyframes example {
  0% {
    left: 0px;
  }
  25% {
    left: 10px ! important;
  }
  100% {
    left: 0px;
  }
}

.seen.animated {
  position: relative;
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
}

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 8, 2016 at 15:44 bfmags 2,93522 gold badges1919 silver badges2828 bronze badges asked Jul 8, 2016 at 15:40 Aleks KpurAleks Kpur 12111 gold badge22 silver badges1111 bronze badges 5

• Do you want it to be positioned exactly 10px on the left, or 10px relative to it's starting point of 366px? – R. Chappell Commented Jul 8, 2016 at 15:44
• Exactly 10px to left – Aleks Kpur Commented Jul 8, 2016 at 15:44
• So it basically looks like, if you hover it then "button" comes out a littlebit, and if u unhover then it goes back in – Aleks Kpur Commented Jul 8, 2016 at 15:44
• I tried your fiddle, and it moves to 10px left of the containing div. It does sound like you want it to animate 10px from it's starting position. You need to wrap your image in a positioned DIV, and then animate your image relative to that DIV. So your DIV would be 366px and your image will then go 10px to the left (essentially 376px). More like this: jsfiddle.net/qg7wnh1o – R. Chappell Commented Jul 8, 2016 at 15:48
• Do you mean something like that: jsfiddle.net/Konrud/jwbvxhv0/3 – Konrud Commented Jul 8, 2016 at 15:48

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 17

You can use translate transform for left/right movement as it does not affect any neighbour elements' position. To make the transition smooth, you need to add transition on transform property for your image.

Update: If you have a button next to the img, which has higher z-index as you mentioned. You need to apply the same effect to a parent element that contains both - that image and that button.

.moving-left
{
  height: 100px;
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
  width: 100px;
}
.moving-left:hover
{
 transform: translateX(10px);
}

.moving-left button
{
  left: 8px;
  position: absolute;
  top: 30px;
  z-index: 99;
}

<div class="moving-left">
  <img src="http://placehold.it/100X100" alt="" />
  <button>Button here</button>
</div><!--.moving-left-->

本文标签：