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

Question

我想要一个脚本/ CSS悬停在比它所在的容器更高的图像将在容器内自动滚动，并将在悬停出来时回到原来的位置。 我真的很糟糕的JavaScript仍然我找到了一个代码，但它似乎并没有工作。

的HTML

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

的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: top 1s ease-out 0s;} 

的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"); 
} 
); 
}); 

我在http://jsfiddle.net/VuTYx/1/

创造的jsfiddle一个小例子请帮帮我。

Answer 1

你的JS似乎一直在工作，但代码包含jQuery，而小提琴没有启用jQuery。我启用了jQuery和它看起来像你描述的工作：通过添加类似http://jsfiddle.net/VuTYx/2/

确保jQuery是正确包含在你的项目：

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

Answer 2

不需要jQuery的只有使用CSS

看这link

唯一的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; } 
}