开发者

Highlight links an corresponding images on hover

开发者 https://www.devze.com 2023-03-09 06:31 出处:网络
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 lin

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 hove开发者_JAVA技巧r we search for the the element with the same class. Just wondering if there is a better way to go about doing this. Thanks.

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


I would switch to "rel", but it doesn't really matter :

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

精彩评论

暂无评论...
验证码 换一张
取 消