4

我正在使用这里的这个 div fadeTo 代码，它会根据悬停来淡化两个 div 之一。

我想做的是添加第三个选项 - 和第三个名为#maindiv的div - 这样：“如果悬停在#maindiv上，不要淡出#sidebar或#primarycontainter，但如果悬停在#sidebar或#primarycontainter，然后淡化其中任何一个（取决于悬停），但不要淡化 #maindiv。”

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

2010 年 2 月 3 日编辑：由于三个 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>
4

3 回答 3

5

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

    $(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代码是合理的。

于 2010-02-04T15:31:49.157 回答
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);
            }
        );
    }
});
于 2010-02-01T18:12:08.043 回答
1

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

$("#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);
          });
        });
于 2010-02-08T14:47:53.927 回答