带有三个 div 的 jQuery 悬停 fadeTo

发布于 2024-08-20 01:27:22 字数 1765 浏览 6 评论 0原文

我正在使用此处的这个 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);
            }
        );
    }
});

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

原文

I'm using this div fadeTo code from here, which fades one of two divs, depending on hover.

What I'd like to do it add a third option - and a third div called #maindiv - in this way: "If hovering over #maindiv, don't fade either #sidebar or #primarycontainter, but if hovering over #sidebar or #primarycontainter, then fade either of those (depending on hover), but don't fade #maindiv."

How would I do that (with another else statement?) while keeping the existing else statement that keeps IE6 from using any of the code? Thanks....

Edit 2/3/10: Is there a different method of handling this because of the three divs? Is a callback needed, or someway to refresh the function, as the code below results in inconsistent fadeTo action?

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

Edit 2/09/10:

Ed Woodcock's answer below works, with a slight modification (of my choosing) in my comments to his answer.

This is the CSS in question:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柳若烟 2024-08-27 01:27:22

这应该可以解决问题，它很难优雅，但改进它应该不会太难：

    $(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 代码是健全的。

This should do the trick, it's hardly elegant but it shouldn't be too hard to refine it:

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

EDIT

Ok, I get the feeling you've miscommunicated your intentions here:

This code will:

Fade #sidebar and #primarycontainer alternately on hover, with the container that is being hovered becoming completely opaque and the div that is not being hovered becoming translucent.
Make #sidebar translucent when nothing is being hovered
Make both #sidebar and #primarycontainer completely opaque when #maindiv is hovered over

if that is not what you're trying to achieve, then alter the question slightly and I'll sort the code to do what you ask.
As for #maindiv doing odd behaviour, it's most likely a quirk in your html or css, the jQuery code is sound.

回复收藏 0 原文

撩人痒 2024-08-27 01:27:22

$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        // Set up hover behavior for #maindiv
        // When #maindiv is hovered, it will effect both 
        // #primarycontainer & #sidebar

        $("#maindiv").hover(function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 0.5);
            },function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 1);
            }
        );

        // Set up hover behaviors for #primarycontainer & #sidebar
        // When either #primarycontainer or #sidebar is hovered
        // it will effect the element which is being hovered

        $("#primarycontainer,#sidebar").hover(function(){
                $(this).fadeTo('fast', 0.5);
            },function(){
                $(this).fadeTo('fast', 1);
            }
        );
    }
});

$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        // Set up hover behavior for #maindiv
        // When #maindiv is hovered, it will effect both 
        // #primarycontainer & #sidebar

        $("#maindiv").hover(function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 0.5);
            },function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 1);
            }
        );

        // Set up hover behaviors for #primarycontainer & #sidebar
        // When either #primarycontainer or #sidebar is hovered
        // it will effect the element which is being hovered

        $("#primarycontainer,#sidebar").hover(function(){
                $(this).fadeTo('fast', 0.5);
            },function(){
                $(this).fadeTo('fast', 1);
            }
        );
    }
});

回复收藏 0 原文

沙与沫 2024-08-27 01:27:22

不是很棘手但有效（如果我很理解你的愿望）：

$("#maindiv").hover(function(){
          $("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);
        },function(){

          $("#sidebar").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#primarycontainer").stop().fadeTo('fast', 0.5);
          });

          $("#primarycontainer").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#sidebar").stop().fadeTo('fast', 0.5);
          });
        });

Not very tricky but works (if I well understand your wish) :

$("#maindiv").hover(function(){
          $("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);
        },function(){

          $("#sidebar").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#primarycontainer").stop().fadeTo('fast', 0.5);
          });

          $("#primarycontainer").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#sidebar").stop().fadeTo('fast', 0.5);
          });
        });

回复收藏 0 原文

~没有更多了~