Переключение кнопок при наведении мыши

Question

Переключение кнопок при наведении мыши

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>

Любая идея, что я делаю неправильно?

SomerenV 05 окт. 2013, в 04:00

Источник

1

Пожалуйста, сделайте jsfiddle
Rich 05 окт. 2013, в 01:42
1

@Rich Он уже предоставил код - просто вырезать / вставить .. Мог бы уже сделать один.
Josh Crozier 05 окт. 2013, в 01:43
0

jsfiddle.net/5Z3Ra Готово :)
SomerenV 05 окт. 2013, в 01:46
0

Это как-то связано с изображениями, которые вы прикрепляете при наведении. Будет трудно отлаживать без реальных изображений.
Rich 05 окт. 2013, в 01:46
0

Изображения, используемые в скрипке, - это изображения, которые я использую, только что загруженные в imgur. Но это одно и то же :)
SomerenV 05 окт. 2013, в 01:49

Показать ещё 3 комментария

Теги:

html

css

button

position

hover

1 ответ

Ещё вопросы

@Rich Он уже предоставил код - просто вырезать / вставить .. Мог бы уже сделать один.
Это как-то связано с изображениями, которые вы прикрепляете при наведении. Будет трудно отлаживать без реальных изображений.
Изображения, используемые в скрипке, - это изображения, которые я использую, только что загруженные в imgur. Но это одно и то же :)

Shekhar K. Sharma · Accepted Answer · 2013-10-05T01-43-00.000Z

Мужчина,

Вы используете другое изображение на 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/

Это работает как шарм! Огромное спасибо! Вы спасатель жизни :)