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 スプライトを使用する必要があります。

編集

または、これには 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 に答える