Rollover effect (not on image) in list item

Question

I am creating a menu in my website which is written something this:
HTML code

<ul id="menu">
<li><a href="index.aspx">Home</a></li>
<li><a href="about.aspx">About</a></li>
<li><a href="sample.aspx">Sample</a></li>
</ul>

CSS code

ul#menu li a:link,ul#menu li a:visited {color:#333333;text-decoration:none;}
ul#menu li a:hover,ul#manu li a:active {color:#a61607;text-decoration:none;}

On the hover of each of the list items, I want show an image on the hover (the images are such that it appears at the boundaries of the text of each list item). This means that the image that is appearing does not have to appear over the text and does not have to replace. It just displaces on the side of the text and disappears when the hover is over.
For each of the list items, there is a separate image assciated for rollover, and has to disappear on the mouse is moved away from the list item text. I am not sure how to get the above effect and all the links that I have followed are guides to chnage the image on rollover. Any suggestions?

Answer 1

You add an image inside the list items after each one of your links. You set display: none; on the images and then you can reveal them on hover using ul#menu li:hover img {display: inline-block}

Demo: http://dabblet.com/gist/3151894

The HTML becomes simply:

<ul id="menu">
    <li><a href="index.aspx">Home</a><img src="imghome.png"></li>
    <li><a href="about.aspx">About</a><img src="imgabout.png"></li>
    <li><a href="sample.aspx">Sample</a><img src="imgsample.png"></li>
</ul>

In the CSS, I've only added:

#menu li img {
    width: 15px;
    display: none;
}
#menu li:hover img { display: inline-block; }

EDIT : Alternatively, the image can be displayed using

#menu a:hover + img { display: inline-block; }

Answer 2

you can do this:

<ul id="menu">
<li><a id="firstLi" href="index.aspx">Home</a></li>
<li><a id="secondLi" href="about.aspx">About</a></li>
<li><a id="thirdLi" href="sample.aspx">Sample</a></li>
</ul>


a#firstLi:hover {background: url('images/image1.png')}
a#secondLi:hover {background: url('images/image2.png')}
a#thirdLi:hover {background: url('images/image3.png')}

Answer 3

Here is the css:

ul#menu li a:link,ul#menu li a:visited {color:#333333;text-decoration:none;}
ul#menu li a:hover,ul#manu li a:active {color:#a61607;text-decoration:none;}
ul#menu li img {display: none;}
ul#menu li:hover img {display: inline-block;}​

I used the same image for all three links, googled a test image to use. Obviously you will use whatever image(s) you want.

<ul id="menu">
<li>
    <a href="index.aspx">
        Home
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>
<li>
    <a href="about.aspx">
        About
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>
<li>
    <a href="sample.aspx">
        Sample
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>

​​​​​​​​​​​​

Edits to respond to op's comment

If you want the icon/image to appear when you rollover the anchor instead of the li. You would change the 4th css line to something like this:

ul#menu a:hover img {display: inline-block;}​

However, I don't know what additional CSS you have to size or position your elements. When I ran just this CSS and HTML in jsfiddle, I run into a "fluttering" issue. When hovering over the anchor, the image is showing but it re-positions all other elements and a sort of hover/non-hover occurs. If I add the following CSS rule that makes my anchors within the list/list items block elements, I have no problem.

ul#menu li a {display: block;}

Additionally, you could also set the height/width or the padding of the anchor or li element to adjust to the dimensions of your images.

Answer 4

Here is the working fiddle: http://jsfiddle.net/Q6CaM/

HTML

<ul id="menu">
    <li><a href="index.aspx">Home</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
<li><a href="about.aspx">About</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
<li><a href="sample.aspx">Sample</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
</ul>​

CSS

li{display:block; overflow:hidden;}
a{display:inline-block; float:left; margin:0 5px 0 0;}
img {display:none; position:absolute; }
li:hover img{display:inline-block;}