小提琴

Question

我有点问题。

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

虽然前两行似乎正确显示了内容区域，但是底行进出，进出，进出等等......

导致此行为的原因是什么，我该如何解决？

小提琴

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

请原谅悬停图片...似乎jsfiddle不喜欢它或者什么......但请放心，在网站上，它有效..

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

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

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

要打破此循环，您需要将鼠标悬停事件附加到.panel元素（因为如果鼠标悬停事件通过图像或内容面板，它将在那里冒泡）或确保内容面板永远不会出现在图像之上。

Answer 2

这是由数据面板增长直到它位于鼠标指针下方引起的，这会触发面板图像上的鼠标输出，这会导致数据面板缩小，直到它不再位于指针下方，从而触发面板上的mouseenter再次形象...

奇怪的jQuery Mouseover / out行为

小提琴

代码 - jQuery 1.7

HTML

CSS

2 个答案: