CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kevin
Kevin

Reputation: 2688

Odd jQuery Mouseover/out Behavior

I have a bit of an issue.

I have a grid of images (3x3), and have a function to swap the image, and show a "content" panel.

While the 1st 2 rows appear to show the content area properly, the bottom row goes in and out and in and out and in and out, etc...

What is causing this behavior, and how can I fix it?

Fiddle

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

Please excuse the hover image... seems jsfiddle doesn't like it or something... but rest assured that in the site, it works..

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

Upvotes: 0

Views: 104

Answers (2)

Peter Herdenborg
Peter Herdenborg

Reputation: 5962

This is caused by the data panel growing until it is beneath the mouse pointer, which triggers a mouseout on the panel image, which causes the data panel to shrink until it's no longer beneath the pointer, which triggers the mouseenter on the panel image again...

Upvotes: 1

gpgekko
gpgekko

Reputation: 3606

The content panel gets shown on top of the image. If you look at the other rows, it is placed next to or under the image.

Because the content panel is in front of the image, the mouseover event is no longer getting fired for the image (because the mouse is now over the content panel). This is causing it to hide the content panel, which means the mouse is over the image again and a loop is formed.

To break this loop, you either need to attach the mouseover event to the .panel elements (because the mouseover event is going to bubble up there if its over either the image or the content panel) or make sure the content panel is never on top of the image.

Upvotes: 1

Related Questions