1

我正在开发一个网站的“特色”部分。这个想法是，当将鼠标悬停在左侧的元素上时，它将触发右半部分的淡入。

这是有效的，除了元素重叠的地方（红线之间的中心的任何地方）。它会导致淡入效果的闪烁。

线框

这是功能 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/

4

1 回答 1

1

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

于 2011-03-21T11:59:28.510 回答