StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>thanks for all the tips :</p> <p>I tried to use the mouseenter / mouseleave events, since they seem to look in detail for the divs they are dealing with (<a href="http://groups.google.com/group/jquery-en/browse_thread/thread/8cb7f6e2f19c0828" rel="nofollow noreferrer">as seen here</a>), but nothing changed. So seeing that all the usual jQuery instructions weren't responding I've checked out as suggested my CSS.</p> <p>And there was the trick.</p> <p>What I had :</p> <pre><code>.text p{position:relative; top:-370px; padding: 0 10px} </code></pre> <p>was setting up a huge, empty space that the browser was interpreting as "not left still" by the cursor (I noticed that overflying that empty space was making the text to respond properly).</p> <p>So I changed to that :</p> <pre><code>.text {margin-top:-370px; padding: 0 10px; float:left} </code></pre> <p>Which lets the "p" tag alone, and positions the second block up in the div, but without a trace of empty space behind it.</p> <p>Then, concerning the snippet, it will work as well with <strong>mouseenter / moseleave</strong> and <strong>hover</strong> :</p> <pre><code><script type="text/javascript"> $(function(){ $('#wrap').mouseenter( function(){ $('#wrap .image').fadeOut(100, function(){ $('#wrap .text').fadeIn(100); }); } ); $('#wrap').mouseleave( function(){ $('#wrap .text').fadeOut(100, function(){ $('#wrap .image').fadeIn(100); }); } ); }); </script> </code></pre> <p>This is the improved version <a href="http://paragraphe.org/nice/test.html" rel="nofollow noreferrer">http://paragraphe.org/nice/test.html</a></p>

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