StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've made some code refactoring for you. </p> <pre><code><div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;" />hover</div> <div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/>hover1</div> <div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/>hover2</div> </code></pre> <p>And simple code:</p> <pre><code>//select all image containers var hoverContainers = $('.hover-img'); //initial fade out hoverContainers.css('opacity', 0.7); //mouseover and mouseleave binding hoverContainers.hover( //mouseover function(){ $(this).fadeTo(100, 1); }, //mouseleave function(){ //check if you image has 'selected' class if (!$(this).is('.selected')) //if no fade out $(this).fadeTo(100, 0.7); } ); //add 'selected' class on click hoverContainers.click(function(){ //remove 'selected' class from previously selected image hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7); //mark clicked image with 'selected' class $(this).addClass('selected'); }); </code></pre> <p><a href="http://jsfiddle.net/3QLC6//" rel="nofollow">jsfiddle</a> with code</p> <p>Best regards</p> <p><strong>Edit</strong> I forgot to fade out previously selected image.</p> <pre><code>//add 'selected' class on click hoverContainers.click(function(){ //remove 'selected' class from previously selected image hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7); //mark clicked image with 'selected' class $(this).addClass('selected'); }); </code></pre> <p>The following code will do the magic: hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7);</p> <p>Test updated version: <a href="http://jsfiddle.net/3QLC6/7/" rel="nofollow">http://jsfiddle.net/3QLC6/7/</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