鼠标悬停/鼠标移开多个元素，但是相同的图像

我有2个问题...鼠标悬停/鼠标移开多个元素，但是相同的图像

（1）I有我想要当悬停[类似于魔线]出现上述我的导航元素的图标，但而不是将图标放置在每个导航元素的上方多次，我只想放置一次图标，并在悬停时重复该图标？（2）当谈到jQuery时，我仍然是一个noob，所以我的代码很长时间以适合我的喜好。请在下面找到我想缩短的代码，如果我能得到一些反馈和建议，那将是很棒的。谢谢。

$(document).ready(function(){ 
    $("#sheep1, #sheep2, #sheep3, #sheep4, #sheep5").hide(); 

    $("#about").mouseover(function(){ 
     $("#sheep1").show(); 
    }); 

    $("#about").mouseout(function(){ 
     $("#sheep1").hide(); 
    }); 

    $("#graphics").mouseover(function(){ 
     $("#sheep2").show(); 
    }); 

    $("#graphics").mouseout(function(){ 
     $("#sheep2").hide(); 
    }); 

    $("#web").mouseover(function(){ 
     $("#sheep3").show(); 
    }); 

    $("#web").mouseout(function(){ 
     $("#sheep3").hide(); 
    }); 

    $("#blog").mouseover(function(){ 
     $("#sheep4").show(); 
    }); 

    $("#blog").mouseout(function(){ 
     $("#sheep4").hide(); 
    }); 

    $("#contact").mouseover(function(){ 
     $("#sheep5").show(); 
    }); 

    $("#contact").mouseout(function(){ 
     $("#sheep5").hide(); 
    }); 
});

来源

2014-09-30 Damo Little

首先，我会给图像的通用类，所以你可以在附加的事件（'了mouseenter mouseover'，'鼠标离开mouseout'）处理器一个选择器。 – melancia 2014-09-30 16:04:03

所有这些元素的ID以'绵羊'开头基本相同，但只是重复？ – melancia 2014-09-30 16:06:48

如果你给你的元素的数据目标属性：

<div id="about" data-target="#sheep1">

然后在你的事件，你可以这样做：

$("#about", "#graphics", "#web", "#blog") 
    .on("mouseover", function(e) { 
    var target = $(this).data("target"); 
    $(target).show(); 
    }).on("mouseout", function(e) { 
    var target = $(this).data("target"); 
    $(target).hide(); 
    });

这样，你重视所有的对象一次，每个都影响正确的目标。

来源

2014-09-30 16:06:03

类添加到所有的羊class='sheep'
要么添加行CSS .sheep {display:none;}或jQuery的$('.sheep').hide();
改变你的羊类模仿悬停ID：不id='sheep1但class='sheep aboutSheep'
添加一类到你的悬停元素class='do_hover'

你的悬停功能：

$(".do_hover").hover(function(){ 

    var theSheep = '.' + $(this).attr('id') + 'Sheep'; 
    $(theSheep).toggle(); 

});

来源

2014-09-30 16:04:16 superUntitled

除非我没有得到它，这不会创建多个元素共享相同的'ID'吗？ _not id ='sheep1 but id ='aboutSheep'_ – melancia 2014-09-30 16:05:16

我没有注意到对单个绵羊的多重引用。不用担心，只要让这个班级，而不是一个身份证件。我会更新我的答案。 – superUntitled 2014-09-30 16:43:10

这个答案更多的是关于如何通过考虑如何有效地命名事物来最小化代码。 – superUntitled 2014-09-30 16:45:29

为什么使用jquery的时候只能用css？

例如：

#about:hover #sheep1{ 
    display:none; 
}

来源

2014-09-30 16:23:49 vasilistolz

鼠标悬停/鼠标移开多个元素，但是相同的图像

回答

相关问题