Javascript 奇怪的jQuery鼠标悬停/移出行为

我有点问题

我有一个网格的图像（3x3），并有一个功能，以交换图像，并显示一个“内容”面板

虽然前两行显示内容区域正确，但最下面的一行显示为进出、进出、进出等

是什么导致了这种行为，我如何修复它

不停摆弄

请原谅悬停图像。。。似乎JSFIDLE不喜欢它或其他什么。。。但请放心，在网站上，它是有效的

代码-jquery1.7 HTML

---

内容面板显示在图像的顶部。如果查看其他行，它将放置在图像旁边或下面

由于内容面板位于图像前面，因此图像不再触发mouseover事件（因为鼠标现在位于内容面板上方）。这会导致它隐藏内容面板，这意味着鼠标再次在图像上并形成一个循环

---

要打破此循环，您需要将鼠标悬停事件附加到

.panel

元素（因为如果鼠标悬停事件位于图像或内容面板上方，则会在那里冒泡）或者确保内容面板永远不在图像的顶部。

这是由于数据面板一直增长到鼠标指针下方，从而触发面板图像上的鼠标出，从而导致数据面板收缩到不再位于指针下方，这会再次触发面板图像上的鼠标指针…

p.s.我也使用hoverIntent插件进行了尝试，获得了相同的结果。在我读这篇文章之前大约一秒钟就找到了答案：）是的，我必须更改面板7-9上的

边距顶部：

。谢谢

// panel grid image swapper
$('.panel img').mouseover(function() {
    var $this = $(this);
    var src = $this.attr("src").match(/[^\.]+/) + "-hover.png";
    $this.attr("src", src);
    // Show data panel
    $('.' + $this.attr('data-panel')).show('fast');
}).mouseout(function() {
    var $this = $(this);
    var src = $this.attr("src").replace("-hover.png", ".png");
    $this.attr("src", src);
    // Hide data panel
    $('.' + $this.attr('data-panel')).hide('fast');
});

<div class="panel-3-image-grid">
    <div class="panel1 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image1.png" alt="" data-panel="panelGrid-1-content" />
        <div class="panelGrid-content panelGrid-1-content">Panel 1</div>
    </div>
    <div class="panel2 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image2.png" alt="" data-panel="panelGrid-2-content" />
        <div class="panelGrid-content panelGrid-2-content">Panel 2</div>
    </div>
    <div class="panel3 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image3.png" alt="" data-panel="panelGrid-3-content" />
        <div class="panelGrid-content panelGrid-3-content">Panel 3</div>
    </div>
    <div class="panel4 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image4.png" alt="" data-panel="panelGrid-4-content" />
        <div class="panelGrid-content panelGrid-4-content">Panel 4</div>
    </div>
    <div class="panel5 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image5.png" alt="" data-panel="panelGrid-5-content" />
        <div class="panelGrid-content panelGrid-5-content">Panel 5</div>
    </div>
    <div class="panel6 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image6.png" alt="" data-panel="panelGrid-6-content" />
        <div class="panelGrid-content panelGrid-6-content">Panel 6</div>
    </div>
    <div class="panel7 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image7.png" alt="" data-panel="panelGrid-7-content" />
        <div class="panelGrid-content panelGrid-7-content">Panel 7</div>
    </div>
    <div class="panel8 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image8.png" alt="" data-panel="panelGrid-8-content" />
        <div class="panelGrid-content panelGrid-8-content">Panel 8</div>
    </div>
    <div class="panel9 panel">
        <img src="/core/images-tmp/panel-images/panel-3/image9.png" alt="" data-panel="panelGrid-9-content" />
        <div class="panelGrid-content panelGrid-9-content">Panel 9</div>
    </div>
</div>

.panel-3{height:515px;width:990px;margin:0 auto;clear:both;position:relative;z-index:1;}
.panel-3-content{width:480px;float:left;padding-top:160px;}
.panel-3-image-grid{width:475px;float:left;padding-top:20px;}
.panel-3-image-grid div.panel{width:154px;height:154px;float:left;margin-right:3px;margin-bottom:3px;}
.panel-3-image-grid div.panel:hover, .panel-3-image-grid div.panel:active, .panel-3-image-grid div.panel.active{

}
.panel-3-image-grid div.panel:last-child{margin-right:0;}

.panelGrid-content{display:none;position:absolute;width:154px;height:310px;background:#c8deed;}
.panelGrid-1-content, .panelGrid-2-content, .panelGrid-3-content{margin-top:3px;}
.panelGrid-4-content, .panelGrid-5-content{margin:-154px 0 0 157px;}
.panelGrid-6-content{margin:-154px 0 0 -157px;}
.panelGrid-7-content, .panelGrid-8-content, .panelGrid-9-content{margin-top:-314px;}