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来克服这些问题。

修改

OR，为此使用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/

按钮移动鼠标悬停

1 个答案: