HTML:
<div id="logo"></div>
<div id="coming-soon"></div>
JavaScript:
$(document).ready(function(){
$("#logo").hover(
function(){
$("#logo").fadeTo(300, 0);
$("#coming-soon").fadeTo(300, 1.0);
},
function(){
$("#logo").fadeTo(300, 1.0);
$("#coming-soon").fadeTo(300, 0);
});
});
现在,#logo
元素在悬停时淡出,#coming-soon
淡入,反之亦然,当鼠标从元素上取下时(这正是我想要的(,但是将鼠标悬停在淡入的新元素上("即将推出"文本(会使旧元素淡入,当我不希望它淡入直到鼠标不再在同一区域上时。
我的问题是我如何修改我的代码,以便将鼠标悬停在#coming-soon
元素上不会使原始元素淡入?
您可以将#coming-soon
的 z 索引设置为 -1
(或为#logo
提供更高的 z 索引(。
另外,请在fadeTo()
之前使用.stop()
:
$("#logo").hover(
function(){
$("#logo").stop().fadeTo(300, 0);
$("#coming-soon").stop().fadeTo(300, 1.0);
},
function(){
$("#logo").stop().fadeTo(300, 1.0);
$("#coming-soon").stop().fadeTo(300, 0);
});
只要给#logo
一个比 CSS 中的 #coming-soon
更高的 z 索引。
#logo{ z-index: 1; }
#coming-soon{ z-index: 0; }