Javascript 悬停时自动滚动高于容器的图像

我想要一个脚本/css，这样在悬停一个比它所在的容器高的图像时，它将在容器内自动滚动，并在悬停时返回到其原始位置。 我真的不擅长javascript，但我已经找到了一个代码，但它似乎不起作用

HTML

<span class="keymel dhiraj">
<img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span>

JS

$( document ).ready(function() {
var xH
$('.dhiraj').hover(
function() {
xH = $(this).children("img").css("height");
xH = parseInt(xH);
xH = xH - 150;
xH = "-" + xH + "px";
$(this).children( "img" ).css("top",xH);
}, function() {
$(this).children( "img" ).css("top","0px");
}
);
}); 

我在Jsfiddle中创建了一个小示例

---

请帮帮我。

您的JS似乎一直在工作，但代码中包含了jQuery，而Fiddle没有启用jQuery。我启用了jQuery，它似乎按照您描述的那样工作：

通过添加以下内容确保jQuery正确包含在项目中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

---

仅通过Css不需要Jquery

看到这个了吗

仅Css：

.komal {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;
}
img {
position: absolute;
transition: all 0.2s ease 0s;
}

 .komal:hover >img
 {  
 -moz-animation: border-bounce 3000ms linear;
 -webkit-animation: border-bounce 3000ms linear;
 }
 @-moz-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }
 @-webkit-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }

---

这是你想要的吗？你好像错过了我的错。其中一种css样式有问题。谢谢你的帮忙。很高兴你找到了罪犯。Best of luck.CSS3是一种解决方案，但请记住，每个浏览器都需要不同的方法。例如，您的解决方案不适用于我，因为我没有在FireFox中浏览。这种方法也不适用于旧版本的IE。CSS3是一种解决方案，但请记住，每个浏览器都需要不同的方法。例如，您的解决方案不适用于我，因为我没有在FireFox中浏览。这种方法也不适用于旧版本的IE。

.komal {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;
}
img {
position: absolute;
transition: all 0.2s ease 0s;
}

 .komal:hover >img
 {  
 -moz-animation: border-bounce 3000ms linear;
 -webkit-animation: border-bounce 3000ms linear;
 }
 @-moz-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }
 @-webkit-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }