jQuery Overlapping Elements causing Flickering

I'm developing a "featured" section to a site. The idea being that when hovering over an element on the left it will trigger a fade-in of the right half.

This is working except where there is an overlap of elements (anywhere in the center in-between the red lines). It causes a flickering of the fade-in effec开发者_如何转开发t.

This is the feature HTML

<div id="feature">  
<div id="left-overlay">...Right</div>
<div id="left-feature"><h2>Left</h2></div>
<div id="right-overlay">...Left</div>
<div id="right-feature"><h2>Right</h2></div></div>

And this is the jQuery

$('div#left-feature').hover(function () {
    $('div#left-overlay').stop().css({'z-index' : '10'}).fadeTo('normal', 1);
}, function () {
    $('div#left-overlay').stop().fadeTo('normal', 0).css({'z-index' : '-10'});
});

Any help would be much appreciated.

I've added a link a demo of this code and its functionality - http://jsfiddle.net/jamescallaghan/7rLhS/

the problem is following: while adding a z-index of 10 to the overlay div its placed above the hovering element (so you aint hovering anymore).

a solution could be to place the overlay divs inside the hovering divs:

<div id="feature">    

<div id="left-feature"><h2>Left</h2>
<div id="left-overlay">...</div>
</div>  


<div id="right-feature"><h2>Right</h2>
<div id="right-overlay">...</div>
</div>   

then i dont see any flickering.

plus id code jquery in a different way (but your way is totally ok as well..)

$(document).ready(function() {

$("div#left-overlay, div#right-overlay").hide();

$('div#left-feature').hover(function() {
    $('div#left-overlay').fadeIn();
}, function() {
    $('div#left-overlay').hide();
});

$('div#right-feature').hover(function() {
    $('div#right-overlay').fadeIn();
}, function() {
    $('div#right-overlay').hide();
});
});

and in the css you then dont need:

display:block; /*its a div, and those have block n-e-ways*/
opacity:0; /*i do this via jquery, or you make display: none; (for those whithout js)*/
-moz-opacity:0;
filter:alpha(opacity=0);
z-index: -10; /*no need for swapping z-index*/

the boxes need to be placed different then, cause the position absolute then starts at the zero of the surrounding div but...