jquery - jQuery图像悬停问题

Question

我正在使用 jQuery，我正在尝试用鼠标悬停做一些事情。当我将鼠标悬停在图像上时，图像会上升，下面会显示一个小文本，但我该怎么做？当我将鼠标悬停在图像上时，图像是否会上升，但是当我将 div 悬停时，孔的东西就会出现空间。有没有办法阻止这种情况？

$(".aImgContainer img").mouseover(function(){
    $(this).css({"transform":"translateY(-40px)"});
});

$(".aImgContainer img").mouseout(function(){
    $(this).css({"transform":"translateY(0px)"});
});

http://jsfiddle.net/mRHa5/

Answer 1

你去：jsFiddle

我已将鼠标事件更改为在容器上.colofoonFoto而不是在 img 上。问题是，当您将图像悬停并上升时 - 您的鼠标不再在其上

Answer 2

尝试更改顶部位置而不是平移？我也不得不调整几个 CSS 规则。

$(".colofoonFoto").mouseover(function(){
    $(this).find('img').css({"top":"-40px"});
});

$(".colofoonFoto").mouseout(function(){
    $(this).find('img').css({"top":"0"});
});

http://jsfiddle.net/carasin/AraQT/2/