突出顯示鏈接懸停時的相應圖像

Question

在項目上工作需要對主頁有特定效果。當用戶將鼠標懸停在導航欄中的鏈接上時，該鏈接將突出顯示，並顯示頁面上的相應縮略圖。每個鏈接/縮略圖都有類，我們現在設置的方式是在懸停時搜索具有相同類的元素。只是想知道是否有更好的方式去做這件事。謝謝。

（頁面的佈局對左側的鏈接中的「主」容器，填寫頁面的那安息的拇指）

$('#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'); 
    } 
}); 

Answer 1

我認爲你是事件處理程序複雜爲什麼剛纔不喜歡這樣

$("'#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'); 
} 

Answer 2

我會切換到「相對」，但它並不真正的問題：

$('#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'); 
});