来自外部菜单的悬停效果

时间:2012-03-24 21:23:04

标签: jquery animation menu hover

我有一个漂亮的悬停效果菜单(http://markilfin.lx10.net/buftemp/) 我想要做的是获得相同的效果,但不仅当我悬停相应的图像,而且当我悬停相应的单词时。这实际上是可能的吗?

1 个答案:

答案 0 :(得分:3)

这尚未经过测试,但我建议:

$('.menu a').hover(
    function(){
        var elemText = $(this).text();
        if ($('#' + elemText).length){
            $('#' + elemText).css({'z-index' : '10'}).find('.zoom').stop().animate({width:"342px",height:"342px",left:"-70px",top:"-70px"}, 400);
        }
    },
    function(){
        var elemText = $(this).text();
        if ($('#' + elemText).length){
            $('#' + elemText).css({'z-index' : '0'}).find('.zoom').stop().animate({width:"212px",height:"212px",left:"0",top:"0"}, 400);
        }
    }
);

JS Fiddle demo

虽然我可能会修改以下建议:

$('.menu a').hover(
    function(){
        var elemText = $(this).text();
        if ($('#' + elemText).length){
            $('#' + elemText).trigger('mouseover');
        }
    },
    function(){
        var elemText = $(this).text();
        if ($('#' + elemText).length){
            $('#' + elemText).trigger('mouseleave');
        }
    }
);

JS Fiddle demo