StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>JavaScript:</p> <pre><code>jQuery(function($){ //best way to do document.ready $('.hoverLink').mouseenter(function(e){ $(this).find('.littleFoo').hide(); $(this).find('.bigFoo').show(); }); $('.hoverLink').mouseleave(function(e){ $(this).find('.littleFoo').show(); $(this).find('.bigFoo').hide(); }); $('.hoverLink').click(false); }); </code></pre> <p>HTML:</p> <pre><code> <ul> <li> <a class="hoverLink" href="#"> <img class="littleFoo" src="#littleA" /> <img class="bigFoo" src="#bigA" /> </a> </li> </ul> </code></pre> <p>Make sure you're using valid html elements. There is no image tag.<br /> <a href="http://www.w3schools.com/tags/default.asp" rel="nofollow">http://www.w3schools.com/tags/default.asp</a></p> <p>EDIT:<br /> This interaction can be done completely in CSS, no JavaScript necessary.</p> <p>alternative JavaScript:</p> <pre><code>jQuery(function($){ //best way to do document.ready $('#hover-list li').mouseenter(function(e){ $(this).find('img:eq(0)').hide(); $(this).find('img:eq(1)').show(); }); $('#hover-list li').mouseleave(function(e){ $(this).find('img:eq(0)').show(); $(this).find('img:eq(1)').hide(); }); $('#hover-list li').click(false); }); </code></pre> <p>and the html is more simple:</p> <pre><code> <ul id="hover-list"> <li> <a href="#"> <img src="#littleA" alt="DONT FORGET YOUR ALT TEXT" /> <img src="#bigA" alt="DONT FORGET YOUR ALT TEXT" /> </a> </li> </ul> </code></pre> <p>Really, classes and id's shouldn't be that much of an effort, unless you're hand coding.</p> <p>And here's some CSS with <strong>just one ID</strong></p> <pre><code>#hover-list li img { display: inline; } #hover-list li img + img { display: none; } #hover-list li:hover img { display: none; } #hover-list li:hover img + img { display: inline; } </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