悬停功能无法按需要工作答案

【问题标题】：hover function not working as needed悬停功能无法按需要工作
【发布时间】：2014-07-26 21:24:52
【问题描述】：

这是我的 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);
     }
 );

悬停内圈图像不起作用。我哪里出错了？

【问题讨论】：

内圈位于外圈下方，因此您的光标始终悬停在外旋转器上，您可以将console.log() 放入每个函数中，然后查看它何时触发
<div id="rotator"> 位于<div id="rotator0"> 之上并防止悬停动作到达内部项目。 jsfiddle.net/x62wR/13

标签： javascript jquery html web jquery-hover

【解决方案1】：

如 cmets 中所述，#rotator0 低于 #rotator，这会中断悬停事件

添加css属性：

#rotator0 {
    z-index:10;
}

似乎可以修复它。

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

但是，现在悬停在外圈上会出现问题，因为较小的 #rotator0 的角现在会覆盖较大的角。您必须将其宽度高度更改为足够小的值并重新定位它。

【讨论】：