悬停功能未按预期工作

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

鼠标悬停内部圆形图片无法正常显示。 我做错了什么？

- Ganga

---

内圈位于外圈下方，因此您的光标始终悬停在外部旋转器上，您可以将 console.log() 放入每个函数中，并查看其何时被触发。 - Uriil

<div id="rotator"> 位于 <div id="rotator0"> 的上方，阻止了鼠标悬停事件传递到内部元素。http://jsfiddle.net/x62wR/13/ - Jason Aller

Answer 1

如评论中所述，#rotator0在#rotator下方，这会破坏悬停事件。

添加CSS属性：

#rotator0 {
    z-index:10;
}

看起来已经修复了。

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

然而，现在悬停在外圆上的效果存在问题，因为较小的#rotator0的角落现在会覆盖更大的圆。您需要将其宽度和高度改为足够小并重新定位。

- fsw