突出显示链接悬停时的相应图像 [英] Highlight links an corresponding images on hover

问题描述

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

Working on a project an need a specific effect on the homepage. When a user hovers over the links in the nav the link is highlighted as well as the corresponding thumbnail on the page. Each of the links/thumbnails have classes an how we have it setup now is that on hover we search for the the element with the same class. Just wondering if there is a better way to go about doing this. Thanks.

（页面的布局左边有链接，main容器中的大拇指填充了页面的其余部分） p>

(The layout of the page has the links on the left side an the thumbs in the "main" container which fills out that rest of the page)

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

推荐答案

我认为你是复杂的事件处理程序为什么只是做它像这样

i think you are complicating the event handler why just do it like this

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

这篇关于突出显示链接悬停时的相应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！