jQuery hover fadeTo with three div's

Question

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().fad…

Accepted Answer

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.

jQuery hover fadeTo with three div's

Solution

Problem