jQuery重叠元素导致闪烁

Question

我正在为网站开发一个“精选”部分。这个想法是，当悬停在左侧的元素上时，它将触发右半部分的淡入
这是有效的，除非元素重叠（红线之间的中心位置）。它会导致淡入淡出效果。

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

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

非常感谢任何帮助
我添加了一个链接，演示了此代码及其功能 - http://jsfiddle.net/jamescallaghan/7rLhS/

Answer 1

问题如下： 在叠加div上添加一个10的z-index，它放在悬停元素上方（所以你不再徘徊）。

解决方案可能是将叠加div放在悬停的div中：

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

然后我没有看到任何闪烁。

以不同的方式加上id代码jquery（但你的方式也完全没问题......）

$(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();
});
});

然后在css中你不需要：

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

盒子需要放置不同然后，因为绝对位置然后从周围div的零开始但是......