0

每当我用鼠标将鼠标悬停在菜单按钮上时，我的菜单按钮就会发生移动问题。一旦我完成了，它们就都到位了。当我按 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>

知道我做错了什么吗？

4

1 回答 1

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/

于 2013-10-05T02:46:35.463 回答