Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's two different approaches, I'm sure there are others:</p> <p><strong>HTML-Centric</strong></p> <pre><code>&lt;ul id="nav"&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;span&gt;My Text&lt;/span&gt; &lt;img src="http://goo.gl/tYsDU"/&gt; &lt;img class="hover" src="http://goo.gl/UohAz"/&gt; &lt;/a&gt; &lt;/li&gt; ... &lt;/ul&gt; #nav, #nav li { list-style-type: none; margin: 0; padding: 0; } #nav li a img { display: inline; } #nav li a img.hover, #nav li a span { display: none; } #nav li a:hover img { display: none; } #nav li a:hover img.hover { display: inline; } </code></pre> <p><a href="http://jsfiddle.net/RdRcj/1" rel="nofollow">http://jsfiddle.net/RdRcj/1</a></p> <p><strong>CSS-Centric</strong></p> <pre><code>&lt;ul id="nav"&gt; &lt;li&gt; &lt;a href="#" alt="My Text"&gt;&lt;/a&gt; &lt;/li&gt; ... &lt;/ul&gt; #nav, #nav li { list-style-type: none; margin: 0; padding: 0; } #nav li { width: 128px; height: 128px; background-image: url(http://goo.gl/tYsDU); } #nav li a { display: block; width: 128px; height: 128px; padding: 0; } #nav li a:hover { background-image: url(http://goo.gl/UohAz); } </code></pre> <p><a href="http://jsfiddle.net/RdRcj/" rel="nofollow">http://jsfiddle.net/RdRcj/</a></p> <p>The first is probably the "best" from a flexibility standpoint; you don't have to hard-bake the dimensions in like you do the second. However, if they're unchanging, perhaps the second is preferable for your approach, it just takes targeting each <code>li</code> and <code>a</code> specifically, which can prove a little brittle.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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