Выделите ссылки на соответствующие изображения при наведении - PullRequest
Новая
       1

Выделите ссылки на соответствующие изображения при наведении

0 голосов
/ 31 мая 2011

Работа над проектом требует определенного эффекта на главной странице. Когда пользователь наводит курсор на ссылки в навигационной панели, ссылка подсвечивается так же, как и соответствующий эскиз на странице. У каждой из ссылок / миниатюр есть классы, и теперь мы настроили их так, что при наведении мыши мы ищем элемент с тем же классом. Просто интересно, есть ли лучший способ сделать это. Спасибо.

(макет страницы содержит ссылки с левой стороны и большие пальцы в «основном» контейнере, который заполняет эту остальную часть страницы) 

$('#homeCatNav li a, #homeThumbsUlHolder li img').hover(function(e){
    var $thisA = $(this),
        $thisClass = $(this).attr("class");

    if (e.type.toLowerCase() === 'mouseenter') {
        $('li.imgToHighlight').find('img'+'.'+$thisClass).addClass('hoverElem');
        $('li.homeArtNameList').find('a'+'.'+$thisClass).addClass('hoverElem');             
    }
    if (e.type.toLowerCase() === 'mouseleave') {
        $('li.imgToHighlight').find('img').removeClass('hoverElem');
        $('li.homeArtNameList').find('a').removeClass('hoverElem');
    }
});

Ответы [ 2 ]

0 голосов
/ 31 мая 2011

Я бы переключился на "rel", но это не имеет значения: 

$('#homeCatNav li a, #homeThumbsUlHolder li img').hover(function(){
        var $thisA = $(this),
        $thisRel = $thisA.attr("rel");
        $('li.imgToHighlight').find('img[rel'+$thisRel+']').addClass('hoverElem');
        $('li.homeArtNameList').find('a[rel'+$thisRel+']').addClass('hoverElem');             
    },function(){
        $('li.imgToHighlight').find('img').removeClass('hoverElem');
        $('li.homeArtNameList').find('a').removeClass('hoverElem');
});
0 голосов
/ 31 мая 2011

я думаю, что вы усложняете обработчик событий, почему просто сделайте это так 

$("'#homeCatNav li a, #homeThumbsUlHolder li img").hover(mouseOver, mouseOut);

function mouseOver() {
     $thisClass = $(this).attr("class");
     $('li.imgToHighlight').find('img'+'.'+$thisClass).addClass('hoverElem');
     $('li.homeArtNameList').find('a'+'.'+$thisClass).addClass('hoverElem'); 
}

function mouseOut() {
   $thisClass = $(this).attr("class");
   $('li.imgToHighlight').find('img').removeClass('hoverElem');
   $('li.homeArtNameList').find('a').removeClass('hoverElem');
}
...