StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can do this:</p> <pre><code>$("div.picture").mouseenter(function() { $(this).next().fadeIn(); }).mouseleave(function() { $(this).next().fadeOut(); }); </code></pre> <p>This binds mouse enter and mouse leave event handlers to all <code>"div.picture"</code> items. Within the event handlers, <code>this</code> refers to the individual item that the mouse moved over, and then <code>.next()</code> gets the element after it - in your case the description div.</p> <p>Demo: <a href="http://jsfiddle.net/j83Dd/" rel="nofollow">http://jsfiddle.net/j83Dd/</a></p> <p>Or you can do this with just CSS, no JavaScript, by using the <a href="http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes" rel="nofollow"><code>:hover</code> pseudo-class</a> together with the <a href="http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors" rel="nofollow">adjacent sibling <code>+</code> selector</a>:</p> <pre><code>div.description { display : none; } div.picture:hover + div.description { display : block; } </code></pre> <p>Demo: <a href="http://jsfiddle.net/j83Dd/1/" rel="nofollow">http://jsfiddle.net/j83Dd/1/</a></p> <p>Oops, forgot the fade on the CSS solution:</p> <pre><code>div.description { opacity : 0; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; } div.picture:hover + div.description { opacity : 1; } </code></pre> <p>Demo: <a href="http://jsfiddle.net/j83Dd/2/" rel="nofollow">http://jsfiddle.net/j83Dd/2/</a></p> <p>All of the above depend on your existing html structure.</p> <blockquote> <p><em>"Should I group each pair of img and p into another div?"</em></p> </blockquote> <p>It seems to me you could probably group the img and the p into a single div, rather than having both in their own divs as well as adding a container div around the lot. In my opinion it kind of makes sense to group them with a div because that makes it clear that they belong together, but you don't have to...</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