html - 鼠标悬停时按钮移动

Question

每当我将鼠标悬停在菜单按钮上时，我的菜单按钮就会移动，这有问题。一旦我完成了这些，它们就都到位了。当我按 F5 重新加载页面时，按钮已经就位。在 IE8 中不会出现该问题。我正在使用 Chrome(已更新)。

CSS:

div.header_container
{
    clear: both;
    float: left;
    height: 180px;
    width: 100%;
}

div.header
{
    margin-top: 54px;
    height: 110px;
    background-color: #000000;
    width: 100%;
}

div.logo
{
    float: left;
    margin-top: 23px;
    margin-left: 5px;
}

div.menu
{
    float: right;
    margin-top: 58px;
    margin-right: 10px;
}

div.menu ul
{

}

div.menu ul li
{
    float: left;
    margin-left: 30px;
    padding-right: 10px;
    list-style-image:url("../images/menu_block.jpg");
}

div.menu ul li:hover
{
    list-style-image:url("../images/menu_block_mo.png");
}

div.menu ul li a
{
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-family: 'CalibriRegular';
}

HTML:

        <div class="wrapper">
    <div class="header_container">
        <div class="header">
            <div class="logo">
                <a href="#" title="Video Photo Editing Graphics | Stefanvlemmix.nl"><img src="images/logo.png" /></a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="./index.html">Start</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="./projects.html">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    </div>

知道我做错了什么吗？

Answer 1

男人，

您在 HOVER 上使用了另一张图片。该悬停图像最初未加载，当您将鼠标悬停在其上时 - 然后它开始加载，因此您在第一次悬停时进行了移动。

您应该使用 CSS Sprite 来克服这些问题。

编辑

或者，为此使用 HTML 字符和 CSS 生成的内容(:after, :before)。只需在悬停时更改颜色即可。

所有你需要的:

div.menu ul li
{
    float: left;
    margin-left: 30px;
    padding-right: 10px;
    list-style:none;
}

.menu li:before {
    display:inline-block;
    content: "\25A0";
    color:white;
    font-size:20px;
    margin-right:5px;
}

div.menu ul li:hover:before
{
    color:red;
}

完成了。看这里:http://jsfiddle.net/shekhardesigner/vQjMX/