悬停功能无法正常工作

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 的角现在会覆盖较大的角。您必须将其宽度高度更改为足够小的值并重新定位它。