Меню с анимированным GIF при наведении - PullRequest
Новая
       12

Меню с анимированным GIF при наведении

0 голосов
/ 25 марта 2012

У меня есть этот HTML-код: 

<ul id="menu">
    <li id="index1">
        <a href="#index1"><span class="link">index1</span></a>
    </li>
    ...
</ul>

и этот стиль CSS: 

#menu > li#index1 a{
    background: url(img/menu_index_out.gif) no-repeat;
}
#menu li#index1{
    background: url(img/menu_index.png) no-repeat;
}
#menu > li#index1 a:hover{
    background: url(img/menu_index_in.gif) no-repeat;
}
...
#menu .link{
    display:none;
}

, но анимация * in.gif и * .out.gif работает правильно только в Opera(11.61) Но когда я тестировал его в Chrome (17.0.963) и в IE9, анимация воспроизводится только один раз, а затем ссылки ведут себя просто, как при наведении курсора, без анимации.

Есть ли способ создания анимированныхGIF всплывают с помощью только CSS (и HTML), который работает в большинстве браузеров?

1 Ответ

0 голосов
/ 25 марта 2012

Да. Вы можете создать новый <img /> -элемент внутри кнопки с помощью javascript, когда человек наведет курсор на кнопку, а затем удалит ее. Но это не очень хороший способ сделать это.

...