Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This should do the trick, it's hardly elegant but it shouldn't be too hard to refine it:</p> <pre><code> $(document).ready(function() { if ($.browser.version = jQuery.browser.msie &amp;&amp; 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); }); } }); </code></pre> <p>EDIT</p> <p>Ok, I get the feeling you've miscommunicated your intentions here:</p> <p>This code will:</p> <ul> <li>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.</li> <li>Make #sidebar translucent when nothing is being hovered</li> <li>Make both #sidebar and #primarycontainer completely opaque when #maindiv is hovered over</li> </ul> <p>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.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload