我正在使用 here, 中的这个 div fadeTo 代码根据悬停情况，淡出两个 div 之一。
我想做的是添加第三个选项 - 和第三个名为#maindiv的div - 以这种方式:“如果将鼠标悬停在#maindiv上，则不要淡出#sidebar或#primarycontainter，但如果将鼠标悬停在#sidebar 或 #primarycontainter，然后淡出其中任何一个(取决于悬停)，但不要淡出 #maindiv。”
我该如何做到这一点(使用另一个 else 语句？)，同时保留现有的 else 语句以防止 IE6 使用任何代码？谢谢....
编辑 2/3/10: 由于三个 div，是否有不同的处理方法？是否需要回调，或者以某种方式刷新函数，因为下面的代码会导致不一致的 fadeTo 操作？
$(document).ready(function(){
if ($.browser.version = jQuery.browser.msie &&
parseInt(jQuery.browser.version) == 6) {
} else {
$("#sidebar").fadeTo('fast', 0.5);
$("#sidebar").hover(function(){
$(this).stop().fadeTo('fast', 1);
$("#primarycontainer").stop().fadeTo('fast', 0.5);
},function(){
$(this).stop().fadeTo('fast', 0.5);
$("#primarycontainer").stop().fadeTo('fast', 1);
}
);
}
});
编辑 2010 年 2 月 9 日:
埃德·伍德科克(Ed Woodcock)的下面的答案有效，在我对他的答案的评论中做了一些(我选择的)修改。
这是有问题的 CSS:
<body>
<div id="outerdiv" div style="position: relative;">
<div id="maindiv" div style="position:relative;">Lorem ipsum dolor sit amet.</div>
<div id="content">
<div id="primary" div style="float: left; margin-right: -20.0em; width: 100%;">
<div id="primarycontainer" div style="margin-right: 16.0em;">
<p>Lorem ipsum dolor sit amet.<p>
</div></div>
<div id="sidebar" div style="float: right; width: 15.0em;">Lorem ipsum dolor sit amet.</div>
</div></div>
</html>
</body>
最佳答案
这应该可以解决问题，它很难优雅，但改进它应该不会太难:
$(document).ready(function() {
if ($.browser.version = jQuery.browser.msie &&
parseInt(jQuery.browser.version) == 6) {
} else {
$("#sidebar").fadeTo('fast', 0.5);
$("#maindiv").hover(function() {
/// The below line is what I just changed, putting the fadeTo() value
/// to 0.5 causes the divs to fade out to be translucent.
$("#primarycontainer,#sidebar").stop().fadeTo('fast', 0.5);
}, function() {
$("#sidebar").stop().fadeTo('fast', 0.5);
$("#primarycontainer").stop().fadeTo('fast', 1);
});
$("#sidebar").hover(function() {
$(this).stop().fadeTo('fast', 1);
$('#primarycontainer').stop().fadeTo('fast', 0.5);
}, function() {
$(this).stop().fadeTo('fast', 0.5);
$('#primarycontainer').stop().fadeTo('fast', 1);
});
}
});
编辑
好吧，我感觉你在这里误解了你的意图:
此代码将:
- 悬停时交替淡化 #sidebar 和 #primarycontainer，悬停的容器变得完全不透明，而非悬停的 div 变得半透明。
- 当没有悬停任何内容时，使 #sidebar 半透明
- 当 #maindiv 悬停在上方时，使 #sidebar 和 #primarycontainer 完全不透明
如果这不是您想要实现的目标，请稍微改变问题，我将对代码进行排序以执行您的要求。 至于#maindiv 的奇怪行为，很可能是您的 html 或 css 中的一个怪癖，jQuery 代码是健全的。
关于带有三个 div 的 jQuery 悬停 fadeTo，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2178618/