突出显示悬停时链接相应的图像

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

我会切换到“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');
});