我正在使用 here, 中的这个 div 淡入淡出代码,它根据悬停来淡化两个 div 之一。

我想做的是添加第三个选项 - 以及名为 #maindiv 的第三个 div - 以这种方式:“如果悬停在 #maindiv 上,不要让 #sidebar 或 #primarycontainter 淡出,但如果悬停在 #sidebar 或#primarycontainter,然后淡出其中任何一个(取决于悬停),但不要淡出 #maindiv。”

我将如何做到这一点(使用另一个 else 语句?)同时保持现有的 else 语句阻止 IE6 使用任何代码?谢谢....

10 年 2 月 3 日编辑:由于三个 div,是否有不同的处理方法?是否需要回调,或者以某种方式刷新函数,因为下面的代码导致不一致的淡入淡出操作?

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

编辑 2/09/10:

下面埃德伍德科克的回答有效,在我对他的回答的评论中略有修改(我选择的)。

这是有问题的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 悬停淡入淡出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2178618/

    10-15 05:36