Problem with the hover effect in css

Question

check this simple code: http://jsfiddle.net/DECPY/ . As you can see when you hover the menu item a gray backgroud apear, but, no behind the menu icon. How can i put the color backgroud behind the image when the mouse pass over?

This is an image that explains evrythink: enter image description here

Beniamin · Accepted Answer · 2011-09-06 08:12:02Z

1

I edited your code a little. I moved home-ico class to a link. And changed appropriate styles. See it here.

answered Sep 6, 2011 at 8:12

Beniamin

3,2482 gold badges21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjamin Crouzier · Accepted Answer · 2011-09-06 08:08:35Z

1

You can do the folowing:

replace

div#vertmenu ul li.home-ico {...}

with:

.home-ico img {
    margin: 0 5px -2px 0;
}

And change yor html like this:

<div id="vertmenu"> 
    <ul>
        <li class="home-ico">
            <a href="#" tabindex="1">
                <img border="0" src="http://www.benyboatti.com/images/home-icon.png"/>
                Home
            </a>
        </li>
    </ul>
</div>

Note: it works even in IE6. jsFiddle

edited Sep 6, 2011 at 8:08

answered Sep 6, 2011 at 8:02

Benjamin Crouzier

42.2k48 gold badges179 silver badges240 bronze badges

Collectives™ on Stack Overflow

Problem with the hover effect in css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related