Databases
StackOverflow2013
Postsdbo
POjQuery hover fadeTo with three div's
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery hover fadeTo with three div's
    text
    copied!<p>I'm using this div fadeTo code from <a href="http://tugbucket.net/jquery/content-to-the-front-with-jquery/" rel="nofollow noreferrer">here,</a> which fades one of two divs, depending on hover.</p> <p>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."</p> <p>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....</p> <p><b>Edit 2/3/10:</b> 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?</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); $("#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><b>Edit 2/09/10:</b></p> <p>Ed Woodcock's answer below works, with a slight modification (of my choosing) in my comments to his answer.</p> <p>This is the CSS in question:</p> <pre><code>&lt;body&gt; &lt;div id="outerdiv" div style="position: relative;"&gt; &lt;div id="maindiv" div style="position:relative;"&gt;Lorem ipsum dolor sit amet.&lt;/div&gt; &lt;div id="content"&gt; &lt;div id="primary" div style="float: left; margin-right: -20.0em; width: 100%;"&gt; &lt;div id="primarycontainer" div style="margin-right: 16.0em;"&gt; &lt;p&gt;Lorem ipsum dolor sit amet.&lt;p&gt; &lt;/div&gt;&lt;/div&gt; &lt;div id="sidebar" div style="float: right; width: 15.0em;"&gt;Lorem ipsum dolor sit amet.&lt;/div&gt; &lt;/div&gt;&lt;/div&gt; &lt;/html&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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