悬停功能无法正常工作

Question

这是我的jsfiddle - http://jsfiddle.net/ganganp/x62wR/5/

     $('#rotator0 div').hover(
     function () {
            ssrc = $(this).find('img').attr("src");
            valt = $(this).find('img').attr("alt");
            (this).children('img').attr('src','http://placehold.it/150x150&text='+valt);
     }, 
     function () {
           $(this).children('img').attr('src',ssrc);
     }
 );

将鼠标悬停在内圈图像上。 我哪里出错？

Answer 1

正如评论中所述，＃rotator0位于#rotator下方，这会打破悬停事件

添加css属性：

#rotator0 {
    z-index:10;
}

似乎解决了这个问题。

http://jsfiddle.net/x62wR/18/

然而现在徘徊在外圈上的工作车越来越小，因为较小的#rotator0的角落现在会覆盖较大的一角。您必须将其宽度高度更改为足够小并重新定位。