Jquery 突出显示鼠标悬停时对应的图像

从事一个项目需要在主页上有一个特定的效果。当用户将鼠标悬停在导航中的链接上时，该链接以及页面上相应的缩略图将高亮显示。每个链接/缩略图都有类。我们现在设置它的方式是在悬停时搜索具有相同类的元素。只是想知道是否有更好的方法来做这件事。谢谢

（页面布局的左侧有链接，“主”容器中的拇指，该容器填充页面的其余部分）

---

我认为您正在使事件处理程序复杂化，为什么要这样做

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

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

---

这样，变量就丢失了。有什么特别的原因要切换到Rel吗？只是为了参考还是为了速度？如果你想在css中使用这个类，并且不影响这两个元素，例如：（homeCatNav和homeArtNameList）将具有相同的类名，但这不是一个大交易啊，是的，考虑过这一点，但由于我只是使用从DB中提取的名称作为类，因此应该避免任何这些特殊情况。谢谢你的意见。

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