jquery исчезает при наведении изображения спрайта

Question

как в http://jsfiddle.net/eFLdd/1/ У меня есть навигация на основе спрайтового изображения.

Есть также изображения при наведении. Мне нужна функция наведения мыши для каждого элемента, которая меняет класс, т.е.

У кого-нибудь есть советы? спасибо заранее.

Answer 1

Было бы лучше, чтобы оба состояния навигации присутствовали одновременно, см., Например, http://jsfiddle.net/graham/kxpLu/2/.

Создав простой список для навигации:

<ul class="navigation">
    <li class="nav1"><a href=""><span></span></a></li>
    <li class="nav2"><a href=""><span></span></a></li>
</ul>

в стиле:

.navigation li { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 0;
    width: 80px;
    height: 20px;
}
.navigation li.nav2 { background-position: -82px 0; }
.navigation li span { 
    background: url(http://blog.grahamlicence.co.uk/jsfiddle/nav.jpg) no-repeat 0 -56px;
    width: 80px;
    height: 20px;
    display: block;
}
.navigation li.nav2 span { background-position: -82px -56px;}

Здесь я добавил нормальное состояние ссылки на элемент <span> и состояние наведения на фоне <li>.

Затем сценарий затухает в нормальном состоянии при наведении, например:

$(".navigation li a").hover(function () {
    $(this).children("span").stop().animate({
        opacity: 0
    }, 300);
}, function () {
    $(this).children("span").animate({
        opacity: 1
    }, 400);
});