奇数jQuery Mouseover/out行为

Question

我有点问题。

我有一个图像网格(3x3)，并有一个函数来交换图像，并显示一个"content“面板。

虽然前2行似乎正确地显示了内容区域，但底部行的进进出出，进进出出，等等。

是什么导致了这种行为，我该如何解决呢？

小提琴

http://jsfiddle.net/o7thwd/4s9GT/

请原谅我的悬停图像..。好像小提琴手不喜欢它什么的..。但请放心，在现场，它是有效的。

代码- jQuery 1.7

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

HTML

<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>

CSS

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

Answer 1

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

Answer 2

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

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

要打破这个循环，要么需要将mouseover事件附加到.panel元素(因为mouseover事件将在图像或内容面板上出现气泡)，要么确保内容面板永远不在图像的顶部。