css中悬停效果的问题

Question

检查这个简单的代码：http://jsfiddle.net/DECPY/。正如您可以看到当您将菜单项悬停在灰色背景上时，但是，菜单图标后面没有。当鼠标移过时，如何将颜色背景放在图像后面？

这是一张解释evrythink的图片：

Answer 1

您可以执行以下操作：

替换

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

使用：

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

并像这样改变你的HTML：

<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>

注意：它甚至可以在IE6中运行。 jsFiddle

Answer 2

我编辑了一些代码。我将home-ico课程移至a链接。并改变了合适的款式。见here。